Formularprüfung

  • geschlossen
  • JavaScript

  • deadbeat
  • 5009 Aufrufe 1 Antwort

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


    Hier nun das javascript:

    HTML-Quellcode

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