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.