Le plugin JQuery.Validate peut-il empêcher la soumission d'un formulaire Ajax?

Question

J'utilise le plugin de formulaire JQuery (http://malsup.com/jquery/form/) pour gérer la soumission ajax d'un formulaire. J'ai également JQuery.Validate (http://docs.jquery.com/Plugins/Validation) branché pour ma validation côté client. Ce que je vois est que la validation échoue quand je m'attends à ce que cela n'empêche pas le formulaire de soumettre. Lorsque j'utilisais un formulaire traditionnel (c'est-à-dire non-ajax) la validation échouait à empêcher le formulaire de soumission ... ce qui est mon comportement désiré.

Je sais que la validation est connectée correctement car les messages de validation apparaissent toujours après la soumission ajax.

Alors qu'est-ce qui me manque, c'est d'empêcher mon comportement désiré? Exemple de code ci-dessous ....

<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

Tout comme une première passe, je me demande pourquoi la ligne

$("form").validate({ 

ne fait pas référence à $ ("searchform"). Je n'ai pas regardé cela, ou essayé, mais cela semble être une discordance. Ne voudriez-vous pas appeler validate sur le formulaire approprié?

Quoi qu'il en soit, si cela est complètement faux, alors l'erreur n'est pas immédiatement évidente. :)

Answer 2

Peut être un return false; sur le formulaire aidera? :) Je veux dire:

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

Answer 3

Vous devez ajouter une fonction de rappel pour l'événement beforeSubmit lors de l'initialisation du ajaxForm():

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

Maintenant, il sait vérifier le résultat de la validation avant de soumettre la page.

Answer 4

Assurez-vous également que tous vos champs de saisie ont un attribut "name" ainsi qu'un attribut "id". J'ai remarqué que le plugin de validation jquery ne fonctionne pas correctement sans ceux-ci.

Answer 5

... eh bien ça fait un moment que ma situation a changé un peu. Actuellement, j'ai une option submitHandler passée au plugin Validate(). Dans ce gestionnaire, j'utilise manuellement ajaxSubmit. Plus une solution de contournement qu'une réponse, je suppose. J'espère que cela pourra aider.

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, ceci est une vieille question, mais je vais mettre notre solution ici pour la postérité. Je classerai personnellement celui-ci comme un hack-trocity, mais au moins ce n'est pas un 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(); 

code ci-dessus a bien fonctionné pour moi.