# jQuery: Validation erst abschicken wenn alles richtig



## supercat1510 (9. Februar 2010)

Ich hab für ein Formular das validation Script für JQuery verwendet. Das Abfragen und überprüfen funktioniert alles prima, nur weiß ich nicht genau was ich einstellen muss, damit das Forumular erst abgeschickt werden kann wenn alle Eingaben richtig sind.


```
var validator = $("#signupform").validate({
        rules: {
            r_name: {
                                required: true,
                                minlength: 5,
                                vornachname: true
                        },
                        tel: {
                                required: true,
                                minlength: 5,
                                phoneDE: true
                        },
                        fax: {
                                maxlength: 30,
                                phoneDE: true,
                                required: false
                        },
                        strasse: {
                                maxlength: 200,
                                required: false
                        },
                        plz: {
                                maxlength: 200,
                                required: false
                        },
            ort: {
                required: true,
                email: true
            },
            datevon: {
                                required: false,
                                maxlength: 10,
                                dateDE: true
                        },
            datebis:  {
                                required: false,
                                maxlength: 10,
                                dateDE: true
                        },
                        sonderwuensche: {
                                required: false,
                                woerter: true
                        },
                        erwachsene: {
                                number: true
                        },
                        kinder: {
                                number: true
                        },
                        alterkinder: {
                                required: false,
                                maxlength: 20
                        }
        },
        messages: {
            r_name: {
                                required: " ",
                                minlength: " ",
                                vornachname: " "
                        },
            tel: {
                                required: " ",
                                minlength: " ",
                                phoneDE: " "
                        },
            fax: {
                maxlength: " ",
                phoneDE: " ",
                                required: " "
            },
                        strasse: {
                                maxlength: " ",
                                required: " "
                        },
                        plz: {
                                maxlength: " ",
                                required: " "
                        },
            ort: {
                required: " ",
                email: " "
            },
            datevon: {
                                required: " ",
                                maxlength: " ",
                                dateDE: " "
                        },
            datebis: {
                                required: " ",
                                maxlength: " ",
                                dateDE: " "
                        },
                        sonderwuensche: {
                                required: " ",
                                woerter: " "
                        },
                        erwachsene: {
                                number: " "
                        },
                        kinder: {
                                number: " "
                        },
                        alterkinder: {
                                required: "",
                                maxlength: ""
                        }
        },
        // the errorPlacement has to take the table layout into account
        errorPlacement: function(error, element) {
            if ( element.is(":radio") )
                error.appendTo( element.parent().next().next() );
            else if ( element.is(":checkbox") )
                error.appendTo ( element.next() );
            else
                error.appendTo( element.parent().next() );
        },
        // specifying a submitHandler prevents the default submit, good for the demo
        submitHandler: function(form) {
            form.submit();

        },
        // set this class to error-labels to indicate valid fields
        success: function(label) {
            // set   as text for IE
            label.addClass("checked");
        }
```


```
<form action="/anfrage.php" method="post" id="signupform">
          <p style="color:#FF0000;" align="center"></p>          <table width="627" border="0" align="center" cellpadding="5" cellspacing="0" class="anfragetable">

            <tr>
              <td width="70"></td>
              <td width="180"><select name="betrefff" id="betrefff" >
                  <option value="Anfrage"  >unverbindliche Anfrage</option>
                  <option value="Reservierung"  >Reservierung</option>
                </select></td>
              <td width="63">&nbsp;</td>
              <td width="70">&nbsp;</td>

              <td width="180">&nbsp;</td>
              <td width="64">&nbsp;</td>
            </tr>
            <tr>
              <td width="70"><label id="lr_name" for="r_name"><strong>Name*</strong></label></td>
              <td width="180" class="field"><input name="r_name" id="r_name" size="25" type="text" value=""  /></td>
              <td width="63" class="status">&nbsp;</td>
              <td width="70"><label id="ltel" for="tel"><strong>Telefon*</strong></label></td>

              <td width="180" class="field"><input name="tel" id="tel" size="25" type="text" value=""  /></td>
              <td width="64" class="status">&nbsp;</td>
            </tr>
            <tr>
              <td width="70"><label id="lstrasse" for="strasse"><strong>Strasse</strong></label></td>
              <td width="180" class="field"><input name="strasse" id="strasse" size="25" type="text" value=""  /></td>
              <td width="63" class="status">&nbsp;</td>
              <td width="70"><label id="lfax" for="fax"><strong>Fax</strong></label></td>

              <td width="180" class="field"><input name="fax" id="fax" size="25" type="text" value=""  /></td>
              <td width="64" class="status">&nbsp;</td>
            </tr>
            <tr>
              <td width="70"><label id="lplz" for="plz"><strong>PLZ/Ort</strong></label></td>
              <td width="180" class="field"><input name="plz" id="plz" size="25" type="text" value=""  /></td>
              <td width="63" class="status">&nbsp;</td>
              <td width="70"><label id="lort" for="ort"><strong>Email*</strong></label></td>

              <td width="180" class="field"><input name="ort" id="ort" size="25" type="text" value=""  /></td>
              <td width="64" class="status">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="6">&nbsp;</td>
            </tr>
            <tr style="display:none; visibility:hidden;">
              <td width="70" class="label">&nbsp;</td>
              <td width="180" class="field"><input name="email" id="email" size="25" type="text" value=""   /></td>

              <td width="63">&nbsp;</td>
              <td width="70">&nbsp;</td>
              <td width="180">&nbsp;</td>
              <td width="64">&nbsp;</td>
            </tr>
            <tr>
              <td width="70"><label id="ldatevon" for="datevon"><strong>Anreise:</strong></label></td>
              <td width="180" class="field"><input name="datevon" id="datevon" size="15" type="text" value=""   /></td>

              <td width="63" class="status">&nbsp;</td>
              <td width="70"><label id="ldatebis" for="datebis"><strong>Abreise:</strong></label></td>
              <td width="180" class="field"><input name="datebis" id="datebis" size="15" type="text" value=""  /></td>
              <td width="64" class="status">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="6">&nbsp;</td>
            </tr>

            <tr>
              <td colspan="6"><table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tbody>
                    <tr>
                      <td width="107" class="label"><label id="lerwachsene" for="erwachsene"><strong>Erwachsene:</strong></label></td>
                      <td width="39" class="field"><input name="erwachsene" type="text" id="erwachsene" value="" size="2" maxlength="3"  /></td>
                      <td width="37" class="status">&nbsp;</td>
                      <td width="58" class="label"><label id="lkinder" for="kinder"><strong>Kinder:</strong></label></td>

                      <td width="36" class="field"><input name="kinder" type="text" id="kinder" value="" size="2" maxlength="3"  /></td>
                      <td width="29" class="status">&nbsp;</td>
                      <td width="118" class="label"><label id="lalterkinder" for="alterkinder"><strong>Alter der Kinder:</strong></label></td>
                      <td width="130" class="field"><input name="alterkinder" id="alterkinder" size="5" type="text" value=""  /></td>
                      <td width="63" class="status">&nbsp;</td>
                    </tr>
                  </tbody>
                </table></td>

            </tr>
            <tr>
              <td colspan="6">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="5" class="label"><label id="lsonderwuensche" for="sonderwuensche"><strong>&nbsp;Worauf ich/wir gro&szlig;en Wert lege(n) - was ich/wir m&ouml;chte(n):</strong></label></td>
              <td width="64" class="status">&nbsp;</td>

            </tr>
            <tr>
              <td colspan="6"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td class="field"><textarea name="sonderwuensche" id="sonderwuensche" cols="76" rows="3" ></textarea></td>
                    <td class="status"></td>
                  </tr>
                </table></td>

            </tr>
            <tr>
              <td colspan="6">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="6"><p class="center">Bitte beachten Sie, dass eine Reservierung erst durch eine Best&auml;tigung<br />
                  unsererseits wirksam wird. Danke!</p>

                <p class="center">Felder mit <strong>*</strong> sind Pflichtfelder.</p></td>
            </tr>
            <tr>
              <td colspan="6" align="center"><label id="lsenden" for="senden">
                  <input name="senden" type="submit" id="senden" value="Senden" />
                </label>
                <label id="ldelete" for="delete">

                  <input type="reset" name="delete" value="Eingabe l&ouml;schen" id="delete" />
                </label>
                <input name="_redirect" value="../danke.php" type="hidden" />
                <input name="_send_email" value="anfrage.txt" type="hidden" /></td>
            </tr>
          </table>
        </form>
```


----------



## Mordef (10. Februar 2010)

Kenn mich nicht wirklich mit jQuery aus, dennoch wage ich mal nen versuch 

Setz mal überall wo Du ein Pflichfeld haben willst das Attribut 
required: true

Einige haben es ja, eine menge jedoch nicht.


----------



## supercat1510 (10. Februar 2010)

Das löst das Problem nicht - ich kann das Formular sogar abschicken ohne auch nur ein einziges Feld aufzurufen - und auch wenn die Überprüfung "Falsch" ist würde es funktionieren.


----------



## rd4eva (10. Februar 2010)

Irgendwie sieht das alles nach wildem planlos zusammen kopiertem Code aus.
Da weiß man garnicht wo man anfangen soll.
 1 . HTML / JS Code bitte nicht in [ PHP ] ...
 2.  Beim JavaScript fehlt am Ende ein });
 3. Das gesamte Script sollte in eine document.ready funktion
 4. Was _vornachname: true_ oder _woerter: true_ sein soll ist mir ein Rätsel
 5. Aus einem mir nicht ganz begreiflichen Grund scheinen Regeln teilweise nur dann zu greifen wenn required: true gesetzt ist (getestet mit Jquery 1.4.1) ansonsten spuckt die Fehlerkonsole einen Error aus

Keine Ahnung ob ich was vergessen hab (Zum HTML hab ich jetzt mal absichtlich nichts gesagt ).
Wenn du damit durch bist können wir ja weiterschauen.

Noch ein Tipp:
Bei der Fehlersuche hilft es einfach mal Stückweise auszukommentieren um den Fehler "einzukreisen"

//e

Fast hätet ichs vergessen


> nur weiß ich nicht genau was ich einstellen muss, damit das Forumular erst abgeschickt werden kann wenn alle Eingaben richtig sind.



Nix, das ist (logischerweise) standart mäßig so.


----------



## supercat1510 (11. Februar 2010)

Hier ist das Formular in Aktion http://www.gaestehaus-bauer.de/anfrage.php - das einzige was halt nicht funktioniert ist, dass das Formular erst abgeschickt wird wenn alles i.O ist.

Hab allerdings noch ne PHP Abfrage dazwischengesetzt - also noch nich ganz so wichtig.


----------



## rd4eva (11. Februar 2010)

Beim befragen einer Fehlerkonsole wäre dir eventuell folgendes aufgefallen

```
Fehler: $.validator.methods[method] is undefined
Quelldatei: jquery.anfragecheck.js
Zeile: 1968
```

Und beim auskommentieren eventuell das es daran liegt das der fehler nur dann auftritt wenn in einer Regel _required: false_ gesetzt ist.
Wie bereits geschrieben kann ich dir nicht sagen warum es so ist...nur das es so ist.

Es ist also nicht so, wie du anzunehmen scheinst, das bei dir noch irgendein Stückchen code fehlt der besagt das das Formular nur dann abgeschickt wird wenn die Überprüfung erfolgreich wahr.
Sondern es ist ganz einfach so das das Script einen Fehler ausspuckt => nicht ausgeführt wird => somit das Formular einfach abgeschickt wird ohne die Validierung überhaupt nach ihrer Meinung zu fragen.


----------

