jQuery: Validation erst abschicken wenn alles richtig

supercat1510

supercat1510

Erfahrenes Mitglied
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.

Code: 
    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");
        }

PHP: 
<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>
 
Zuletzt bearbeitet:
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.
 
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.
 
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 :rolleyes:).
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.
Zum Vergrößern anklicken....

Nix, das ist (logischerweise) standart mäßig so.
 
Zuletzt bearbeitet:
Beim befragen einer Fehlerkonsole wäre dir eventuell folgendes aufgefallen
Code: 
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück