jQuery.Validate: Weiter wenn alle ok?

lachender_engel · 13.01.2014

Hallo, Zusammen.
Es geht heute um das Plugin jQuery Validate. Ich habe in einem kleinen Formular eine Validierung, die auch klappt. In meiner JS-Datei sieht das so aus:

Code:

    $(function(){
      $("#contactForm").validate({
        onfocusout: false,
        onkeyup: false,
        focusCleanup: true,
        rules: {
            email: {email: true},
            name: {minlength: 3},
            message: {minlength: 10},
            subject: {minlength: 5}
          },
        });
    });

Das klappt auch soweit.
Das Formular soll nun beim Klick auf den Submit-Button über eine PHP-Datei versendet werden. Da klappt auch und sieht im Code so aus:

Code:

    $("#contactForm").submit(function(){
        name = $('name').val();
        email = $('email').val();
        subject = $('subject').val();
        message = $('message').val();
         
        data = $(this).serialize();
        data = data + '&request_type=contact&lang=' + lang;

        $.post('sendEmail.php', data, function(results){
            if(results == 'true') {
                $('#contactForm').fadeOut('fast', function(){
                    $('div#form_result').fadeIn('slow');
                });
            } else {
                $('<label class="error" style="display: block;" for="email" generated="true">Fatal Error. Please contact us via Email!</label>' ).insertBefor( "#name" );
            };
        });
         
        return false;
    });

Jetzt habe ich folgende Situation: Ich klicke auf den Submit-Button. Die Felder werden über Validate geprüft und es ist ein Fehler. In dem Moment hat der Submit-Button meine Datei sendEmail.php schon aufgerufen, die über PHP auch noch mal validert und einen Fehler zurück liefert. Dadurch erscheitn die Fatal-Error-Ausgabe. Diese soll aber nur erscheinen, wenn es PRobleme beim E-Mail-Versand gibt.
Daher suche ich eine Möglichkeit die $.post-Funktion mit einer If-Abfrage zu umschließen die nur ausgeführt wird, wenn die Validierung durch $("#contactForm").validate erfolgreich abgeschlossen wurde. Also in etwa so (von mir ausgedacht!):

Code:

     if($("#contactForm").validate == 'success') {

         };

Gibt es so etwas? Nach zwei Stunden Foren und Beiträge durchlesen habe ich dazu bisher keine Lösung gefunden.
Wäre toll, wenn mir hier jemand dazu helfen kann. Danke!

Pixelaner · 13.01.2014

AW: jQuery.Validate: Weiter wenn alle ok?

könntest du nicht innerhalb der validate Funktion den "success" callback nutzen um daraufhin die Eingaben zu versenden?

Code:

$("#contactForm").validate({
  // ...
  success: function(){ alert('gib gummi!'); }
});

lachender_engel · 14.01.2014

AW: jQuery.Validate: Weiter wenn alle ok?

Pixelaner schrieb:
könntest du nicht innerhalb der validate Funktion den "success" callback nutzen um daraufhin die Eingaben zu versenden

Leider nein, denn da springt validate hin sobald *eine* der Validierungsprüfungen erfolgreich war. Nun habe ich gefunden, dass "submitHandler" die richtige Funktion sein kann, doch scheine ich sie nicht richtig anzuwenden. Meinen Code habe ich wie folgt geändert:

Code:

    $(function(){
      $("#bookingForm").validate({
        onfocusout: true,
        onkeyup: false,
        focusCleanup: true,
        rules: {email: {required: true,email: true},
        adults: {number: true},

        submitHandler: function() {
            $("#bookingForm").submit(function(){
              from = $('from').val();
              to = $('to').val();
              adults = $('adults').val();
              email = $('email').val();
              
              data = $(this).serialize();
              data = data + '&request_type=quick&lang=' + lang;
              
              $.post(sendEmail.php', data, function(results){
                if(results == 'true') {
                    $('#bookingForm').fadeOut('fast', function(){
                        $('div#form_result').fadeIn('slow');
                    });
                } else {
                    $('<label class="error" style="display: block;" for="email" generated="true">Fatal Error. Please contact us via Email!</label>' ).insertAfter( "#checkAvailability" );
                };
            });
            return false;
            });
          },
        }
       });
    });

Wenn ich jetzt auf den Submit-Button klicke, und alle Felder sind richtig ausgefüllt, dann scheint nicht mehr zu passieren, als dass die Eingabefelder wieder geleert werden (keine Ahnung warum). Setze ich direkt ein alert hinter submitHandler: function() dann wird die Meldung nicht ausgegeben ob wohl die Validierung Fehlerfrei ist. Kann mir dabei jemand helfen?

lachender_engel · 14.01.2014

AW: jQuery.Validate: Weiter wenn alle ok?

So, da habe ich doch die Lösung gefunden: Der submitHandler ist die Funktion meiner Gunst. Jedoch muss dieser VOR allen anderen Parametern in der Validierungs-Funktion stehen. Dann klappt die Ausgabe.

afr0kalypse · 14.01.2014

AW: jQuery.Validate: Weiter wenn alle ok?

Gute Lösung, den vorher aufzurufen. Muss ich auch mal testen. Hat bei mir mit Datumsvalidierung nämlich auch nicht geklappt. Ich habs dann so gelöst:

HTML:

jQuery('input[name=name_des_submit_button]').click(function() {
     if(irgendwas_kaputt)
       ...
     else {
         // Submit button feuern
         return true;
     }
}