Kann JQuery.Validate-Plugin die Übermittlung eines Ajax-Formulars verhindern

Question

Ich verwende das JQuery-Formular-Plugin (http://malsup.com/jquery/form/), um die Ajax-Übermittlung eines Formulars zu bearbeiten. Ich habe auch JQuery.Validate (http://docs.jquery.com/Plugins/Validation) für meine Client-Seite Validierung eingesteckt.

Was ich sehe, ist, dass die Validierung fehlschlägt, wenn ich es erwarte, aber es nicht stoppt das Formular zu übermitteln. Wenn ich eine traditionelle Form (d. H. Nicht-Ajax) verwendete, verhinderte das Validierungsversagen das Formular überhaupt zum Übermitteln .... was mein gewünschtes Verhalten ist.

Ich weiß, dass die Validierung korrekt angeschlossen ist, da die Validierungsmeldungen immer noch erscheinen, nachdem der Ajax-Submit passiert ist.

Also was ich vermisse das verhindert mein gewünschtes Verhalten? Beispielcode unten ....

<form id="searchForm" method="post" action="/User/GetDetails"> 
     <input id="username" name="username" type="text" value="user.name" /> 
     <input id="submit" name="submit" type="submit" value="Search" /> 
</form> 
<div id="detailsView"> 
</div> 

<script type="text/javascript"> 
    var options = { 
     target: '#detailsView' 
    }; 
    $('#searchForm').ajaxForm(options); 

    $('#searchForm').validate({ 
    rules: { 
    username: {required:true}}, 
    messages: { 
    username: {required:"Username is a required field."}} 
    }); 
</script> 

Answer 1

Gerade als erster Pass, ich frage mich, warum die Linie

$("form").validate({ 

nicht auf $ bezieht ("Suchformular"). Ich habe nicht nachgesehen oder es versucht, aber das scheint nur ein Missverhältnis zu sein. Möchten Sie nicht auf dem entsprechenden Formular validieren?

Wie auch immer, wenn das völlig falsch ist, dann ist der Fehler nicht sofort offensichtlich. :)

Answer 2

Kann ein sein Rückgabe false; auf dem Formular wird helfen? :) ich meine:

<form id="searchForm" method="post" action="/User/GetDetails" onSubmit="return false;"> 

Answer 3

Sie benötigen eine Callback-Funktion für die Verwendung mit dem beforeSubmit Ereignisse hinzuzufügen, wenn die ajaxForm Initialisierung():

var options = { 
     beforeSubmit: function() { 
      return $('#searchForm').validate().form(); 
     }, 
     target: '#detailsView' 
    }; 

es das Ergebnis der nun weiß, überprüfen Validierung, bevor die Seite gesendet wird.

Answer 4

Stellen Sie außerdem sicher, dass alle Ihre Eingabefelder ein "name" -Attribut sowie ein "id" -Attribut haben. Ich habe bemerkt, dass das jquery Validierungs-Plugin ohne diese nicht korrekt funktioniert.

Answer 5

... nun, es ist schon eine Weile her, also hat sich meine Situation ein wenig verändert. Derzeit habe ich eine submitHandler-Option an das Validate() -Plugin übergeben. In diesem Handler verwende ich manuell ajaxSubmit. Mehr ein Workaround als eine Antwort, denke ich. Ich hoffe, das hilft.

http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html

var v = jQuery("#form").validate({ 
    submitHandler: function(form) { 
     jQuery(form).ajaxSubmit({target: "#result"}); 
    } 
}); 

Answer 6

ok, das ist eine alte Frage, aber ich werde unsere Lösung hier für die Nachwelt setzen. i klassifizieren persönlich diese ein als ein Hack-trocity, aber zumindest ist es nicht ein Hack-tacu-Manjaro

<script type="text/javascript"> 
    var options = { 
     target: '#detailsView' 
    }; 

// -- "solution" -- 
$('#searchForm').submit(function(event) { 
    this.preventDefault(event); // our env actually monkey patches preventDefault 
           // impl your own prevent default here 
           // basically the idea is to bind a prevent default 
           // stopper on the form's submit event 
}); 
// -- end -- 

    $('#searchForm').ajaxForm(options); 

    $('#searchForm').validate({ 
     rules: { 
     username: {required:true}}, 
     messages: { 
     username: {required:"Username is a required field."}} 
    }); 
</script> 

Answer 7

$('#contactform').ajaxForm({ 
    success : FormSendResponse, 
    beforeSubmit: function(){ 
    return $("#contactform").valid(); 
    } 
}); 


$("#contactform").validate(); 

Above Code funktionierte gut für mich.