Comment afficher une boîte de dialogue jQuery uniquement si un formulaire est validé lorsque je clique sur le bouton "Envoyer"?

Question

J'ai un formulaire qui utilise la validation jQuery. Lorsque l'utilisateur clique sur le bouton Soumettre, une fenêtre de dialogue s'affiche pour indiquer les champs remplis par l'utilisateur avec les données saisies par l'utilisateur. Il demande à l'utilisateur si cette information est correcte. Si c'est le cas, l'utilisateur clique sur le bouton Soumettre dans la fenêtre de dialogue et le formulaire est soumis. Si l'utilisateur clique sur le bouton 'Fix it', la fenêtre de dialogue se ferme et l'utilisateur retourne au formulaire.

Mon problème est que ma boîte de dialogue s'affiche lorsque l'utilisateur clique sur le bouton d'envoi du formulaire même s'il y a des erreurs dans le formulaire. Je veux seulement afficher la fenêtre de dialogue si les données de formulaire sont validées par jQuery. Comment puis-je faire cela?

Je pense à quelque chose comme:

if (('#form').validates() == true) { 
    $('#verification_dialog').dialog('open'); 
} 

est-il un moyen de jQuery pour déterminer si la forme entière a validé? Ou dois-je créer ma propre fonction pour le faire?

Answer 1

essayer

$("#form").validate({....}); 

if (('#form').valid()) { 
    $('#verification_dialog').dialog('open'); 
} 

plus sur .valid()

modifier

ici est mon travail autour de ce ...

var _form; 
    $("#myform").validate({ 
    //.... other options 
    meta: "validate", 
    submitHandler: function(form) { 
     // triggers only if form is valid.... 
     _form = form; // capture the form.... 
     $('#verification_dialog').dialog('open'); 
     return false; // stop submit... 
    } 
    }) 
    $('#verification_dialog').dialog({ 
    //.... other options 
    autoOpen: false, 
    buttons : { 
      "Accept" : function(){    
       _form.submit(); // submit the captured form... 
      } 
    } 
    }); 

quick demo

Answer 2

Pour obtenir une valeur booléenne pour la validation, vous pouvez utiliser:

if($('#form').validate().form()){ 
... 
}