javascript - ejemplo - Cómo evitar que un formulario se envíe en la función submitHandler del complemento jQuery Validate

jquery validate rules

Question

Estoy usando jQuery con el complemento de validación en http://docs.jquery.com/Plugins/Validation/validate

Deseo evitar que el formulario se envíe después de que se hayan realizado sus procesos de validación y envío a través de ajax. Tengo el siguiente código:

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

Sin embargo, el problema con esto es que submitHandler envía el formulario a pesar de que tengo una return false; declaración en la última línea de la función de manejo. Quiero evitar el comportamiento predeterminado y detener el envío del formulario porque ya lo he enviado a través de ajax.

¿Cómo debo evitar que el código se envíe después de pasar por los códigos ajax en la función submitHandler ?

Answer 1

Lo hago así y funciona exactamente como quieres que funcione:

$("#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.
}
});

Answer 2

Puede codificar esto de una manera muy simple a través de "jQuery Walidate". http://jquery.dop-trois.org/walidate/

Allí puede codificar una función, que se ejecutará en el envío. Busque devolución de llamada en la documentación.

Answer 3

Puede llamar a event.preventDefault() en el evento submit :

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

Answer 4

Tal vez pueda validar externamente sin usar un botón de enviar:

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

Answer 5

desafortunadamente, parece que la llamada: submitHandler: function(form){ no toma un argumento de evento, por lo que parece que la única solución es una return false como esta:

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

Answer 6

$("#myform").validate({
rules: {...},
submitHandler: function(form, event) {
event.preventDefault();
alert("Do some stuff...");
//submit via ajax
}
});

Espero que esto ayude.