JavaScript Formular prüfen und evtl. Fehlermeldungen anzeigen

[Heuriger]

Hallo zusammen.

Ich habe ein Problem mit der Prüfung eines Formulars.

...
<script charset="utf-8" src="jquery.js"></script>
<script>
   HIER KOMMT DIE LÖSUNG REIN
</script>
<form onsubmit="return validateRegisterForm();">
Vorname:
     <input type="text" id="firstname" name="firstame"><br>
     <p id="firstname-error" style="display: none; color: red;">
          Bitte tragen Sie hier Ihren Vornamen ein!
</p>
Nachname:
     <input type="text" id="lastname" name="lastname"><br>
     <p id="lastname-error" style="display: none; color: red;">
          Bitte tragen Sie hier Ihren Nachnamen ein!
</p>
Kennwort:
     <input type="password" id="password1" name="password1"><br>
     <p id="password1-error" style="display: none; color: red;">
          Das Kennwort ist zu kurz!
</p>
     Kennwort wiederholen:
     <input type="password" id="password2" name="password2"><br>
     <p id="password2-error" style="display: none; color: red;">
          Die Kennwörter stimmen nicht überein!
</p>
     <input type="submit" value="Registrieren">
</form>
...

Man darf es mit Javascript und/oder JSON prüfen.

Firstname könnte ich ja so prüfen:

if (document.Formular.firstname.value == "") {
FALSCH BLA BLA BLA
return false; }

Richtig?
Wie bekomme ich jetzt die unsichtbaren Fehlermeldungen (siehe oben) angezeigt?
Man müsste doch das

style="display: none;

auf true setzen.

Richtig?
Kann wer helfen?

Gruß

 

[benneq]

Wenn dann setzt du es auf "display: block" oder "display: inline" oder "display: inline-block", true gibt's nicht

 

[character]

Man darf es mit Javascript und/oder JSON prüfen.

Diese Aussage ergibt keinen Sinn.

 

[Daaron]

1.) Solche clientseitige Validierung darf NIE die einzige Form sein. Alle Eingaben müssen vom Server noch einmal gefilzt werden
2.) Die eleganteste Lösung für Formular-Validierungen vor dem Submit ist HTML5. Du musst eh im serverseitigen Script einen Fallback für die Leute schreiben, die kein JS haben (oder noch schlimmer: deinen Validator manipuliert haben). Also nutze diesen Fallback für Leute ohne HTML5, alle anderen müssen kein zusätzliches JavaScript laden.
3.) Wenn schon JS, dann doch nicht selbtgeschrieben. Ich bin mit sicher, für jQuery gibts etwas in der Art von http://mootools.net/docs/more/Forms/Form.Validator

 

[mambokurt]

1.) Solche clientseitige Validierung darf NIE die einzige Form sein. Alle Eingaben müssen vom Server noch einmal gefilzt werden
2.) Die eleganteste Lösung für Formular-Validierungen vor dem Submit ist HTML5. Du musst eh im serverseitigen Script einen Fallback für die Leute schreiben, die kein JS haben (oder noch schlimmer: deinen Validator manipuliert haben). Also nutze diesen Fallback für Leute ohne HTML5, alle anderen müssen kein zusätzliches JavaScript laden.
3.) Wenn schon JS, dann doch nicht selbtgeschrieben. Ich bin mit sicher, für jQuery gibts etwas in der Art von http://mootools.net/docs/more/Forms/Form.Validator

+1
Finds furchtbar dämlich jedes Feld einzeln abzuprüfen. Entweder sowas wie Jquery nutzen oder eben selbst JS coden, aber dann würd ich da einfach für jede zu prüfende Seite am Anfang ein Array mit Id und zu prüfenden Merkmalen(a la 'meineFeldId' => 'String, max30Zeichen, nichtleer') der zu prüfenden Felder hinterlegen und das dann jeweils durchrödeln und mit passenden Unterfunktionen testen. Für jedes Feld eine eigene If zu bauen ist definitiv nicht der richtige Weg, zumal du da einen Haufen Code doppelt verwendest...

Da das Zeug aber serverseitig sowieso validiert werden muß, bliebe zu überlegen ob man nicht normale Submits einfach weglässt und nur mit Ajax wegposted, wenn alles korrekt validiert wirds gespeichert und wenn nicht schickt man einen JSON String mit fehlerhaften Feldern zurück, die dann rot markiert werden.

 

[Daaron]

Da darfste dann nur nicht vergessen, dass man das Formular auch bei abgeschaltetem JS versenden kann -> kein AJAX zum Versenden und erst recht keine Behandlung eines JSON-Rückgabewertes.
Da ist die einfachste Variante, einfach dem Formular beim Versand via AJAX einen "isAjax"-Parameter anzukleben, der dann serverseitig die richtige Reaktion und Antwort erzeugt.

 

[mambokurt]

Da darfste dann nur nicht vergessen, dass man das Formular auch bei abgeschaltetem JS versenden kann -> kein AJAX zum Versenden und erst recht keine Behandlung eines JSON-Rückgabewertes.
Da ist die einfachste Variante, einfach dem Formular beim Versand via AJAX einen "isAjax"-Parameter anzukleben, der dann serverseitig die richtige Reaktion und Antwort erzeugt.

Würde ich als low-priority einordnen. Wer absichtlich JS abschaltet ist halt selbst schuld, Browser die gar kein JS unterstützen dürften sich anteilsmäßig unter 1% bewegen. Allerdings lagere ich Ajax Requests eh immer in eigene Klassen aus, also wär es eigentlich kein Problem den Requests auf einen normalen Submitbutton zu legen und im Javascript nach Absenden des Ajaxrequests abzubrechen, so dass ein normaler Submit bei abgeschalteten JS vom selben Button kommt. Dann könnte man das relativ sauber trennen...

 

[Daaron]

JS abzuschalten ist weiter verbreitet als du denkst. Frag mal hier im Forum rum, wer alles das NoScript - Plugin nutzt... und ansonsten: Barrierefreiheit ist keine Magie!

 

[kling1]

jetzt abgesehen davon wie sinnvoll es ist hier die lösung für dein problem
du hast ja als erstes da jquery includiert.. das macht das ganze sehr einfach..
jquery hat die methoden hide und show.. mit show kannst du ein element anzeigen und hide wieder verstecken also display auf none setzen.. bei hide wird die eigenschaft einfach entfehrnt..
du kannst so benutzen

<script>
//$(selector).show();
//in deinem fall zum Beispiel (Weil du mit ids arbeitest)
$('#firstname-error').show();
//bei show('slow'); gibt es einen kleinen effekt
</script>

das prüfen geht dann so

<script>
if ($('#firstname').val().length < 1) {
	//code
}
</script>

trotzedem solltest du die daten in deinem serverseitigen script nochmal validieren