web-dev-qa-db-fra.com

Empêcher un formulaire d'être soumis dans jQuery Valider la fonction submitHandler du plugin

J'utilise jQuery avec le plugin validate à http://docs.jquery.com/Plugins/Validation/validate

Je souhaite éviter que le formulaire ne soit soumis après les processus de validation et de soumission effectués via ajax . J'ai le code suivant:

$("#myform").validate({
   rules: {...},
   submitHandler: function(form) { 
      alert("Do some stuff...");
      //submit via ajax
      return false;  //This doesn't prevent the form from submitting.
   }
});

Cependant, le problème avec ceci est que la submitHandler soumet le formulaire même si j'ai une instruction return false; à la dernière ligne de la fonction de traitement. Je veux empêcher le comportement par défaut et arrêter le formulaire de soumettre parce que j'ai déjà soumis via ajax. 

Comment dois-je empêcher le code de soumettre après avoir parcouru les codes ajax dans la fonction submitHandler?

javascriptjqueryvalidation
29
Carven

Je le fais comme ça et ça fonctionne exactement comme vous voulez:

$("#myform").submit(function(e) {
    e.preventDefault();
}).validate({
    rules: {...},
    submitHandler: function(form) { 
        alert("Do some stuff...");
        //submit via ajax
        return false;  //This doesn't prevent the form from submitting.
    }
});
48
Zoltan
$("#myform").validate({
   rules: {...},
   submitHandler: function(form, event) { 
      event.preventDefault();
      alert("Do some stuff...");
      //submit via ajax
   }
});

J'espère que cette aide.

28
pockiiie

Peut-être pouvez-vous valider en externe sans utiliser de bouton d'envoi:

if($("#myform").valid()){
    alert("Do some stuff...");
}
2
pilavust

Vous pouvez le coder de manière très simple via "jQuery Walidate" . http://jquery.dop-trois.org/walidate/

Là, vous pouvez coder une fonction, qui sera exécutée sur submit . Recherchez Callback dans la documentation.

1
Gregory

Vous pouvez appeler event.preventDefault() sur l'événement submit:

$("#myform").on("submit", function(event) {
    event.preventDefault();
});
1
VisioN

malheureusement, il semble que l'appel: submitHandler: function(form){ ne prenne pas d'argument d'événement. Il semble donc que la seule solution est une instruction return false comme celle-ci:

...
submitHandler: function(form) {
    //your code
    return false;
},
...
0
Miquel Adell

travail violon

selon le document de validation du plugin jquery.

submitHandler (par défaut: soumission de formulaire natif)

la méthode de soumission via submitHandler ci-dessous est citée dans documentation cela devrait fonctionner, mais cela ne fonctionne pas, ils ont dit que

Rappel pour le traitement de la soumission lorsque le formulaire est valide. Obtient la form et le submit event comme seuls arguments. Remplace la soumission par défaut. Le bon endroit pour soumettre un formulaire via Ajax après sa validation.

Exemple: Soumet le formulaire via Ajax, à l'aide du plug-in jQuery Form, lorsqu'il est valide.

$("#myform").validate({   
   submitHandler: function(form,event) {
     event.preventDefault();
      $(form).ajaxSubmit();   
   } 
});

j'écris ici le code qui a fonctionné pour moi . appelez simplement votre plugin validayion et n'incluez pas submitHandler dans vos arguments de fonction de validation.

au lieu de soumettre et d'empêcher avec submitHandler d'utiliser la méthode jQuery de soumission de formulaire. comme ci-dessous

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

$(document).on("submit", "form", function (event) {
   event.preventDefault();
   alert("submit"); 
});
0
Waqar Hussain

J'ai corrigé de cette façon. Un correctif pour un bogue du plug-in de validation jQuery qui n'est pas corrigé même sur v1.19.0 

$('#save_edit_user').on('click', function () {
    var isValid = $("#edit_user").validate().form() && $("#edit_user").validate().element("#edit_user_email");
    //check current ajax call by $.active 
    //the form is not submitted before 0 ajax is running
    if (isValid && $.active == 0){
     // my save logic

    }
});
0
Adrian P.