javascript - plugin - submithandler jquery validate ajax

El complemento JQuery.Validate puede evitar el envío de un formulario Ajax

Question

Estoy usando el complemento de formulario JQuery ( http://malsup.com/jquery/form/ ) para manejar el envío de un formulario ajax. También tengo JQuery.Validate ( http://docs.jquery.com/Plugins/Validation ) conectado para mi validación del lado del cliente.

Lo que veo es que la validación falla cuando lo espero, sin embargo, no detiene el envío del formulario. Cuando estaba usando una forma tradicional (es decir, no-ajax), la falla de validación impedía la forma de enviar ... en absoluto, que es mi comportamiento deseado.

Sé que la validación está conectada correctamente ya que los mensajes de validación siguen apareciendo después de que se haya producido el envío ajax.

Entonces, ¿qué es lo que me estoy perdiendo que está impidiendo mi comportamiento deseado? Código de ejemplo debajo ...

<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

Puede ser un retorno falso; en el formulario ayudará? :) Quiero decir:

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

Answer 2

Necesita agregar una función de devolución de llamada para usar con el evento beforeSubmit al inicializar ajaxForm ():

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

Ahora sabe comprobar el resultado de la validación antes de enviar la página.

Answer 3

También asegúrese de que todos sus campos de entrada tengan un atributo de "nombre" y un atributo "id". Noté que el complemento de validación de jquery no funciona correctamente sin estos.

Answer 4

... bueno, ha pasado un tiempo, así que mi situación ha cambiado un poco. Actualmente tengo una opción submitHandler pasada al complemento Validate (). En ese controlador utilizo manualmente ajaxSubmit. Más una solución que una respuesta, supongo. Espero que ayude.

http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html

var v = jQuery("#form").validate({
submitHandler: function(form) {
jQuery(form).ajaxSubmit({target: "#result"});
}
});

Answer 5

Bueno, esta es una vieja pregunta, pero pondré nuestra solución aquí para la posteridad. personalmente clasifico este como un hack-trocity, pero al menos no es 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 6

$(''#contactform'').ajaxForm({
success : FormSendResponse,
beforeSubmit: function(){
return $("#contactform").valid();
}
});
$("#contactform").validate(); 

El código anterior funcionó bien para mí.

Answer 7

Solo como primer paso, me pregunto por qué la línea

$("form").validate({

no se refiere a $ ("forma de búsqueda"). No he buscado esto o lo he intentado, pero parece ser un desajuste. ¿No le gustaría llamar a validar en el formulario apropiado?

De todos modos, si esto es completamente incorrecto, entonces el error no es inmediatamente obvio. :)