Formular mit JavaScript validieren und abschicken. (Schickt immer ab)

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Formular mit JavaScript validieren und abschicken. (Schickt immer ab)

    Hallo Leute,

    es wäre super nett, wenn ihr den Fehler finden würdet, ich sitze hier ungelogen seit 2 Stunden dran. Habe auch schon einen Freund drüberschauen lassen. Der soll bis jetzt nur kontrollieren ob in alle Felder des Formulars was eingetragen worden ist und wenn ja soll er "SUBMIT" ausgeben, und wenn was fehlt, soll er mir sagen was. Die Fehlermeldung soll hinten angehengt werden, aber soweit kommt er anscheinend gar nicht :( Denn er zeigt im Linkfenster (get-Methode) immer an, er würde etwas verschicken.

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    3. <head>
    4. <title>Schlau mi T V</title>
    6. <script type="text/javascript">

    Quellcode

    1. var fehler = "Du hast vergessen\n";
    2. var agbfehler = "";
    3. var ausgabe = "";
    4. function validierung() {
    5. var f = document.forms[0].elements;
    8. if(f["Benutzer"].value==""){fehler+="\ndeinen Benutzernamen";}
    9. if(f["Vorname"].value==""){fehler+="\ndeinen Vornamen";}
    10. if(f["Nachname"].value==""){fehler+="\ndeinen Nachnamen";}
    11. if(f["Passwort"].value==""){fehler+="\ndein Passwort";}
    12. if(f["pWiederholung"].value==""){fehler+="\ndie Wiederholung deines Passwortes";}
    13. if(f["mail"].value==""){fehler+="deine Email-Adresse";}
    15. if(fehler!="Du hast vergessen\n"){
    16. fehler += "\n\nanzugeben.";
    17. ausgabe = fehler;
    18. if(!f["AGB"].checked) {
    19. agbfehler += "\nAußerdem hast Du vergessen den AGB zu zustimmen.";
    20. ausgabe += agbfehler;
    21. }
    22. //AUSGABE ausgabe
    23. document.getElementById("Fehlermeldung").appendChild(ausgabe);
    24. return false;
    26. }else if(!f["AGB"].checked) {
    27. agbfehler = "Du hast leider vergessen, den AGB zuzustimmen.";
    28. //AUSGABE agbfehler
    29. document.getElementById("Fehlermeldung").appendChild(agbfehler);
    30. return false;
    31. }else if(f["AGB"].checked) {
    32. //SUBMIT
    33. alert("SUBMIT");
    34. return true;
    35. }
    37. }
    Alles anzeigen


    Quellcode

    1. </script>
    3. </head>
    4. <body>
    6. <form onsubmit="return validierung(this);" >
    7. Benutzername: <input type="text" name="Benutzer" /><br />
    9. Vorname <input type="text" name="Vorname" /><br />
    10. Nachname <input type="text" name="Nachname" /><br /><br />
    12. Passwort <input type="password" name="Passwort" /><br />
    13. Passwort-Wiederholung <input type="password" name="pWiederholung" /><br /><br />
    15. E-Mail-Adresse <input type="text" name="mail" /><br /><br />
    17. Geburtstag Datepicker
    19. <br /><br /><br />Ich stimme den AGB zu:
    20. <input type="checkbox" name="AGB" value="ja" />
    22. <input type="submit" name="Submit" value="Registrieren" />
    23. </form>
    24. <span id="Fehlermeldung"></span>
    25. </body>
    26. </html>
    Alles anzeigen



    Danke, Noeden.

    Sorry, wenn der Fehler blöd ist, aber ich komm einfach nicht drauf :(



    // edit by vince - code highlighting

  • Hi,


    benutze einen normalen button und submitte die Form via JS.


    Quellcode

    1. <form name="registerForm" >
    2. [...]
    3. <input type="button" name="Submit" value="Registrieren" onclick="validierung()" />
    4. [...]



    Quellcode

    1. [...]
    2. }else if(f["AGB"].checked) {
    3. //SUBMIT
    4. alert("SUBMIT");
    5. document.forms["registerForm"].submit();
    6. return true;
    7. }[...]

  • Danke, aber jetzt schickt er es leider gar nicht mehr ab, ich poste nochmal den ganzen Code neu, bin mir nicht sicher, ob ich nicht was geändert habe. Bin ein wenig aufgelöst, mache wohl besser morgen weiter.

    Aber schonmal herzlichen Dank,


    Und Fehlermeldungen gibt er mir leider auch keine in die span-Tags.


    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    3. <head>
    4. <title></title>

    Quellcode

    1. <script type="text/javascript">
    2. var fehler = "Du hast vergessen\n";
    3. var agbfehler = "";
    4. var ausgabe = "";
    5. function validierung() {
    6. var f = document.forms[0].elements;
    9. if(f["Benutzer"].value==""){fehler+="\ndeinen Benutzernamen";}
    10. if(f["Vorname"].value==""){fehler+="\ndeinen Vornamen";}
    11. if(f["Nachname"].value==""){fehler+="\ndeinen Nachnamen";}
    12. if(f["Passwort"].value==""){fehler+="\ndein Passwort";}
    13. if(f["pWiederholung"].value==""){fehler+="\ndie Wiederholung deines Passwortes";}
    14. if(f["mail"].value==""){fehler+="deine Email-Adresse";}
    16. if(fehler!="Du hast vergessen\n"){
    17. fehler += "\n\nanzugeben.";
    18. ausgabe = fehler;
    19. if(!f["AGB"].checked) {
    20. agbfehler += "\nAußerdem hast Du vergessen den AGB zu zustimmen.";
    21. ausgabe += agbfehler;
    22. }
    23. //AUSGABE ausgabe
    24. document.getElementById("Fehlermeldung").appendChild(ausgabe);
    25. return false;
    27. }else if(!f["AGB"].checked) {
    28. agbfehler = "Du hast leider vergessen, den AGB zuzustimmen.";
    29. //AUSGABE agbfehler
    30. document.getElementById("Fehlermeldung").appendChild(agbfehler);
    31. return false;
    32. }else if(f["AGB"].checked) {
    33. //SUBMIT
    34. alert("SUBMIT");
    35. document.forms["registerForm"].submit();
    36. return true;
    37. }
    39. }
    41. </script>
    Alles anzeigen

    Quellcode

    1. </head>
    2. <body>
    4. <form name="registerForm" method="get">
    5. Benutzername: <input type="text" name="Benutzer" /><br />
    7. Vorname <input type="text" name="Vorname" /><br />
    8. Nachname <input type="text" name="Nachname" /><br /><br />
    10. Passwort <input type="password" name="Passwort" /><br />
    11. Passwort-Wiederholung <input type="password" name="pWiederholung" /><br /><br />
    13. E-Mail-Adresse <input type="text" name="mail" /><br /><br />
    15. Geburtstag Datepicker
    17. <br /><br /><br />Ich stimme den AGB zu:
    18. <input type="checkbox" name="AGB" value="ja" />
    20. <input type="button" name="Submit" value="Registrieren" onclick="validierung(this.form)" />
    21. </form>
    22. <span id="Fehlermeldung"></span>
    23. </body>
    24. </html>
    Alles anzeigen

  • Da muss ich vince zum allerersten mal widersprechen... Ich finde die Lösung mit dem onsubmit="return false" eigentlich eleganter.
    Allerdings solltest du die Referenz, die du mit this übergibst auch nutzen

    Also so

    Quellcode

    1. function validierung(f) {
    2. // var f = document.forms[0].elements;


    Ich habe deinen Code bei mir nicht ausprobiert, aber wenn es zu JavaScript Fehlern kommt, weil irgendeine Variable (z.B. f["Benutzer"]) nicht existiert, dann wird dein Formular dennoch abgeschickt.

    Schau einfach mal in die Firefox Fehlerkonsole nachdem du das Formular abschickst. Ich bin sicher, da steckt der Fehler.

  • Torben Brodt schrieb:

    Da muss ich vince zum allerersten mal widersprechen... Ich finde die Lösung mit dem onsubmit="return false" eigentlich eleganter.
    Allerdings solltest du die Referenz, die du mit this übergibst auch nutzen.

    Skandal :D Ich hatte vermutet "onsubmit" sei deprecated, dem ist nicht so. (Quelle W3C Forms)



    @noeden
    dein Problem ist die Ausgabe.
    appendChild() hängt keinen "Klartext" an das Element, sondern fordert ein Knotenobjekt.

    In deinem Fall musst du "innerText/innerHtml" nutzen.

    Quellcode

    1. document.getElementById("Fehlermeldung").innerText = ausgabe;