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
- <form id="contactForm" enctype="multipart/form-data" method="post" name="contactForm" action="/de/forms/contactFormsSuccess.php">
- <tr valign="middle">
- <td>
- <label for="Anrede">Anrede <span style="color:#CC0000">*</span>:</label><br />
- <select name="we_ui_contactForm[Anrede]" id="Anrede" class="pflicht">
- <option>bitte auswählen</option>
- <option value="Frau">Frau</option>
- <option value="Herr">Herr</option>
- <option value="Firma">Firma</option>
- </select>
- </td>
- <td>
- <label for="Firma">Firma:</label><br />
- <input id="Firma" type="text" name="we_ui_contactForm[Firma]" value="" />
- </td>
- </tr>
- <tr valign="middle">
- <td>
- <label for="Vorname">Vorname <span style="color:#CC0000">*</span>:</label><br />
- <input id="Vorname" class="pflicht" type="text" name="we_ui_contactForm[Vorname]" value="" />
- </td>
- <td>
- <label for="Name">Nachname <span style="color:#CC0000">*</span>:</label><br />
- <input id="Name" class="pflicht" type="text" name="we_ui_contactForm[Name]" value="" />
- </td>
- </tr>
- ...
- <tr valign="middle">
- <td style="padding-bottom:15px;">
- <label for="Kostenvoranschlag">Möchten Sie zunächst einen kostenlosen Kostenvoranschlag erhalten? <span style="color:#CC0000">*</span>:</label>
- </td>
- <td style="padding-bottom:15px;">
- <input id="Kostenvoranschlag_yes" class="pflicht" style="margin:1px; width: 50px" type="radio" name="we_ui_contactForm[Kostenvoranschlag]" value="Ja" /> Ja
- <input id="Kostenvoranschlag_no" class="pflicht" style="margin:1px; width: 50px" type="radio" name="we_ui_contactForm[Kostenvoranschlag]" value="Nein" /> Nein
- </td>
- </tr>
- ...
- <tr>
- <td colspan="2">
- <br>
- <input type="submit" name="submit" id="submit" class="rightColum" value="senden"/>
- </td>
- </tr>
Hier nun das javascript:
HTML-Quellcode
- <script type="text/javascript">
- $(function () {
- $('.block').change(function () {
- $(this).parents('tr').next().toggle(); // Nächste Zeile Ein-/Ausblenden
- });
- //Beim abschicken prüfen
- $('#submit').click(function () {
- $('td:visible').each(function (i, td) { //Alle Sichtbaren Zellen prüfen
- //TextFelder prüfen
- $(td).find('.pflicht').each(function (j, input) {
- //Zum Beispiel auf länge prüfen...min 4...
- if($(input).val().length < 4) {
- $(input).siblings("label").css({color: 'red'});
- //alert("Bitte füllen Sie alle Pflichtfelder aus!");
- return false;
- }
- $('#contactForm').submit();
- });
- });
- });
- });
- </script>
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