Formularprüfung

  • geschlossen
  • JavaScript

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

  • Formularprüfung

    Hi Leute,

    ich habe folgendes Problem:

    In einem recht großen Formular werden Teile z.B. Rechnungsadresse nur bei aktivierter Checkbox ein geblendet. Nun soll das Formular auf Pflichtfleder überprüft werden. Pflicht felder sin Input-, Select-Felder und Radio. Erst wenn alle Pflichtfelder ausgefüllt sin soll das Formular abgeschickt werden.

    Was ich bereits habe:

    Formular:

    HTML-Quellcode

    1. <form id="contactForm" enctype="multipart/form-data" method="post" name="contactForm" action="/de/forms/contactFormsSuccess.php">
    2. <tr valign="middle">
    3. <td>
    4. <label for="Anrede">Anrede <span style="color:#CC0000">*</span>:</label><br />
    5. <select name="we_ui_contactForm[Anrede]" id="Anrede" class="pflicht">
    6. <option>bitte auswählen</option>
    7. <option value="Frau">Frau</option>
    8. <option value="Herr">Herr</option>
    9. <option value="Firma">Firma</option>
    10. </select>
    11. </td>
    12. <td>
    13. <label for="Firma">Firma:</label><br />
    14. <input id="Firma" type="text" name="we_ui_contactForm[Firma]" value="" />
    15. </td>
    16. </tr>
    17. <tr valign="middle">
    18. <td>
    19. <label for="Vorname">Vorname <span style="color:#CC0000">*</span>:</label><br />
    20. <input id="Vorname" class="pflicht" type="text" name="we_ui_contactForm[Vorname]" value="" />
    21. </td>
    22. <td>
    23. <label for="Name">Nachname <span style="color:#CC0000">*</span>:</label><br />
    24. <input id="Name" class="pflicht" type="text" name="we_ui_contactForm[Name]" value="" />
    25. </td>
    26. </tr>
    27. ...
    28. <tr valign="middle">
    29. <td style="padding-bottom:15px;">
    30. <label for="Kostenvoranschlag">Möchten Sie zunächst einen kostenlosen Kostenvoranschlag erhalten? <span style="color:#CC0000">*</span>:</label>
    31. </td>
    32. <td style="padding-bottom:15px;">
    33. <input id="Kostenvoranschlag_yes" class="pflicht" style="margin:1px; width: 50px" type="radio" name="we_ui_contactForm[Kostenvoranschlag]" value="Ja" /> Ja
    34. <input id="Kostenvoranschlag_no" class="pflicht" style="margin:1px; width: 50px" type="radio" name="we_ui_contactForm[Kostenvoranschlag]" value="Nein" /> Nein
    35. </td>
    36. </tr>
    37. ...
    38. <tr>
    39. <td colspan="2">
    40. <br>
    41. <input type="submit" name="submit" id="submit" class="rightColum" value="senden"/>
    42. </td>
    43. </tr>
    Alles anzeigen


    Hier nun das javascript:

    HTML-Quellcode

    1. <script type="text/javascript">
    2. $(function () {
    3. $('.block').change(function () {
    4. $(this).parents('tr').next().toggle(); // Nächste Zeile Ein-/Ausblenden
    5. });
    6. //Beim abschicken prüfen
    7. $('#submit').click(function () {
    8. $('td:visible').each(function (i, td) { //Alle Sichtbaren Zellen prüfen
    9. //TextFelder prüfen
    10. $(td).find('.pflicht').each(function (j, input) {
    11. //Zum Beispiel auf länge prüfen...min 4...
    12. if($(input).val().length < 4) {
    13. $(input).siblings("label").css({color: 'red'});
    14. //alert("Bitte füllen Sie alle Pflichtfelder aus!");
    15. return false;
    16. }
    17. $('#contactForm').submit();
    18. });
    19. });
    20. });
    21. });
    22. </script>
    Alles anzeigen


    Mein Problem ist nun ich habe keine Ahnung, wie ich

    1. Neben Input auch Radio, checkbox- und Selectfelder überprüfe
    2. Das Formular wird abgeschickt, obwohl nicht alle Pflichtfelder ausgefüllt sind

    Dank für Eure Hilfe
  • Hi deadbeat,

    ich fang mit Frage 2 an :)

    Du musst verhindern, dass das Default-Verhalten deines Submit-Buttons ausgeführt wird. Dazu übergibst du im Click-Handler das Event und preventest das dann, ungefähr so:

    Quellcode

    1. $('#submit').click(function (event) {
    2. event.preventDefault();
    3. ...



    Zur ersten Frage:

    Du kannst auf die Felder genauso zugreifen, wie auf die anderen Felder auch, nämlich mit der val() Methode. Schau mal hier, da sind direkt ein paar Beispiele mit Checkboxen und Select-Feldern.




    Gruß,
    sombrelain