jQuery Validation plugin: deshabilitar la validación para los botones de envío especificados

Question

Tengo un formulario con varios campos que estoy validando (algunos con métodos agregados para la validación personalizada) con el excelente complemento jQuery Validation de Jörn Zaeffere. ¿Cómo elude la validación con los controles de envío especificados (en otras palabras, la validación de incendios con algunas entradas de envío, pero no activa la validación con otros)? Esto sería similar a ValidationGroups con controles de validador ASP.NET estándar.

Mi situación:

Es con ASP.NET Web Forms, pero se puede ignorar que, si lo desea. Sin embargo, estoy usando la validación más como una "recomendación": en otras palabras, cuando se envía el formulario, la validación se dispara pero en lugar de mostrar un mensaje "requerido", aparece una "recomendación" que dice algo en la línea de "usted" echó de menos los siguientes campos ... ¿quieres continuar de todos modos? " En ese punto en el contenedor de error hay otro botón de envío ahora visible que se puede presionar, lo que ignoraría la validación y se enviaría de todos modos. ¿Cómo eludir los formularios .validate() para este control de botón y todavía publicar?

La muestra Comprar y vender una casa en http://jquery.bassistance.de/validate/demo/multipart/ permite esto para golpear los enlaces anteriores, pero lo hace creando métodos personalizados y agregándolo al validador. Preferiría no tener que crear métodos personalizados para duplicar la funcionalidad que ya está en el complemento de validación.

La siguiente es una versión abreviada de la secuencia de comandos de aplicación inmediata que tengo en este momento:

var container = $("#<%= Form.ClientID %> div.validationSuggestion"); 

$('#<%= Form.ClientID %>').validate({   
    errorContainer: container, 
    errorLabelContainer: $("ul",container), 
    rules: { 
     <%= YesNo.UniqueID %>: { required: true }, 
     <%= ShortText.UniqueID %>: { required: true } // etc. 

    }, 
    messages: { 
     <%= YesNo.UniqueID %>: 'A message.', 
     <%= ShortText.UniqueID %>: 'Another message.' // etc. 
    }, 
    highlight: function(element, errorClass) { 
     $(element).addClass(errorClass); 
     $(element.form).find("label[for=" + element.id + "]").addClass(errorClass); 
     $(element.form).find("label[for=" + element.id + "]").removeClass("valid"); 
    }, 
    unhighlight: function(element, errorClass) { 
     $(element).removeClass(errorClass); 
     $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass); 
     $(element.form).find("label[for=" + element.id + "]").addClass("valid"); 
    }, 
    wrapper: 'li' 
}); 

Answer 1

Usted puede agregar una clase CSS de cancel a un botón de envío para suprimir la validación

por ejemplo

<input class="cancel" type="submit" value="Save" /> 

Consulte la documentación de jQuery Validador de esta característica aquí: Skipping validation on submit

---

EDITAR:

La técnica anterior ha dejado de utilizarse y se sustituye con el atributo formnovalidate.

<input formnovalidate="formnovalidate" type="submit" value="Save" /> 

Answer 2

Puede utilizar el onsubmit: opción falsa (ver documentation) al cablear validación que no se validará en la presentación del formulario. Y luego en su botón asp: agregar un OnClientClick = $ ('# aspnetForm'). Valid(); para verificar explícitamente si la forma es válida.

Puede llamarlo modelo de participación voluntaria, en lugar de la opción de exclusión descrita anteriormente.

Nota, también estoy usando la validación de jquery con ASP.NET WebForms. Hay algunos problemas para navegar, pero una vez que los superas, la experiencia del usuario es muy buena.

Answer 3

otra forma (no documentado) para hacerlo, es llamar:

$("form").validate().cancelSubmit = true; 

en el evento click del botón (por ejemplo).

Answer 4

(Extensión de @lepe 's y @redsquare respuesta para ASP.NET MVC + jquery.validate.unobtrusive.js)

---

El jquery validation plugin (no el Microsoft una discreta) le permite poner una clase .cancel en el botón de enviar para evitar la validación completo (como se muestra en la respuesta aceptada).

To skip validation while still using a submit-button, add a class="cancel" to that input. 

    <input type="submit" name="submit" value="Submit"/> 
    <input type="submit" class="cancel" name="cancel" value="Cancel"/> 

(no confunda esto con type='reset' que es algo completamente diferente)

Por desgracia, el manejo de la validación jquery.validation.unobtrusive.js (ASP.NET MVC) de código Kinda tornillos hasta el jquery.validate plugin's default behavior.

Esto es lo que se me ocurrió para permitirle poner .cancel en el botón de enviar como se muestra arriba. Si Microsoft alguna vez 'soluciona' esto, entonces puede simplemente reutilizar este código.

// restore behavior of .cancel from jquery validate to allow submit button 
    // to automatically bypass all jquery validation 
    $(document).on('click', 'input[type=image].cancel,input[type=submit].cancel', function (evt) 
    { 
     // find parent form, cancel validation and submit it 
     // cancelSubmit just prevents jQuery validation from kicking in 
     $(this).closest('form').data("validator").cancelSubmit = true; 
     $(this).closest('form').submit(); 
     return false; 
    }); 

Nota: Si en el primer intento, parece que esto no está funcionando - asegurarse de que no está Roundtripping al servidor y ver una página del servidor generado con errores. Tendrá que omitir la validación en el lado del servidor por otros medios: esto solo permite que el formulario se envíe al lado del cliente sin errores (la alternativa sería agregar atributos .ignore a todo en su formulario).

(Nota: puede que tenga que añadir button al selector si utiliza botones para enviar)

Answer 5

Esta pregunta es viejo, pero he encontrado otra manera de evitarlo es usar $('#formId')[0].submit(), que recibe el DOM elemento en lugar del objeto jQuery, omitiendo así cualquier enlace de validación. Este botón envía el formulario principal que contiene la entrada.

<input type='button' value='SubmitWithoutValidation' onclick='$(this).closest('form')[0].submit()'/> 

Además, asegúrese de que usted no tiene ningún input 's nombre 'submit', o se anula la función llamada submit.

Answer 6

Añadir atributo formnovalidate a la entrada

<input type="submit" name="go" value="Submit"> 
    <input type="submit" formnovalidate name="cancel" value="Cancel"> 

Adición class = "cancelar" ya no se utiliza

Ver documentación para Saltarse la validación de presentar en este Otra forma link

Answer 7

(dinámico):

$("form").validate().settings.ignore = "*"; 

Y para volver a habilitarlo, acabamos de establecer respaldar el valor por defecto:

$("form").validate().settings.ignore = ":hidden"; 

Fuente: https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443

Answer 8

He encontrado que la manera más flexible es hacer uso de jQuery:

event.preventDefault(): 

P. ejSi en lugar de presentar Quiero redirigir, que puedo hacer:

$("#redirectButton").click(function(event) { 
    event.preventDefault(); 
    window.location.href='http://www.skip-submit.com'; 
}); 

o puedo enviar los datos a un punto final diferente (por ejemplo, si quiero cambiar la acción):

$("#saveButton").click(function(event) { 
    event.preventDefault(); 
    var postData = $('#myForm').serialize(); 
    var jqxhr = $.post('http://www.another-end-point.com', postData ,function() { 
    }).done(function() { 
     alert("Data sent!"); 
    }).fail(function(jqXHR, textStatus, errorThrown) { 
     alert("Ooops, we have an error"); 
    }) 

Una vez que hacer 'event.preventDefault();' usted elude la validación

Answer 9

que tienen dos botones para el envío de formularios, botón denominado Save and Exit no pasa por la validación:

$('.save_exist').on('click', function (event) { 
      $('#MyformID').removeData('validator'); 
      $('.form-control').removeClass('error'); 
      $('.form-control').removeClass('required');     
      $("#loanApplication").validate().cancelSubmit = true; 
      $('#loanApplication').submit(); 
      event.preventDefault(); 
}); 

Answer 10

$("form").validate().settings.ignore = "*"; 

O

$("form").validate().cancelSubmit = true; 

pero sin éxito en un validador personalizado requerido. Para una llamada de presentar de forma dinámica, he creado una falsa oculta botón de enviar con este código:

var btn = form.children('input.cancel.fakeSubmitFormButton'); 
if (btn.length === 0) { 
    btn = $('<input name="FakeCancelSubmitButton" class="cancel fakeSubmitFormButton hide" type="submit" formnovalidate value="FakeCancelSubmitButton" />'); 
    form.append(btn); 
} 
btn.click(); 

Ahora omitir la validación correcta :)