Complemento de validación jQuery: deshabilita la validación para los botones de envío especificados

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

Mi situación:

Es con ASP.NET WebForms, pero puede ignorarlo 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 "obligatorio", una "recomendación" muestra que dice algo como "usted" omitió los siguientes campos ... ¿desea continuar de todos modos? " En ese punto en el contenedor de errores, ahora hay otro botón de envío visible que se puede presionar, lo que ignoraría la validación y el envío de todos modos. ¿Cómo eludir los formularios .validate () para este control de botón y aún publicar?

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

La siguiente es una versión abreviada del script inmediatamente aplicable que tengo ahora:

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'
}); 

Puede agregar una clase CSS de cancelun botón de envío para suprimir la validación

p.ej

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

Consulte la documentación de jQuery Validator de esta función aquí: omitir la validación al enviar

EDITAR :

La técnica anterior ha quedado obsoleta y reemplazada por el formnovalidateatributo.

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

Otra forma (indocumentada) de hacerlo es llamar:

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

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

Otra forma (dinámica) más:

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

Y para volver a habilitarlo, simplemente restablecemos el valor predeterminado:

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

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

Agregar atributo formnovalidate a la entrada

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

Agregar class = "cancel" ahora está en desuso

Vea los documentos para omitir la validación al enviar en este enlace

Puede usar la opción onsubmit: false (consulte la documentación ) cuando realice la validación que no se validará al enviar el formulario. Y luego, en su botón asp: agregue un OnClientClick = $ ('# aspnetForm'). Valid (); para verificar explícitamente si el formulario es válido.

Podría llamar a esto el modelo de aceptación, en lugar de la opción de exclusión descrita anteriormente.

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

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

El complemento de validación jquery (no el discreto de Microsoft) le permite poner una .cancelclase en su botón de envío para omitir la validación por 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)

Desafortunadamente, el jquery.validation.unobtrusive.jscódigo de manejo de validación (ASP.NET MVC) arruina el comportamiento predeterminado del complemento jquery.validate .

Esto es lo que se me ocurrió para permitirle poner .cancelel botón de enviar como se muestra arriba. Si Microsoft alguna vez 'arregla' esto, entonces solo puede eliminar 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 al primer intento parece que esto no está funcionando, asegúrese de que no esté dando una vuelta al servidor y que vea una página generada por el servidor con errores. Deberá omitir la validación en el lado del servidor por algún otro medio: esto solo permite que el formulario se envíe al lado del cliente sin errores (la alternativa sería agregar .ignoreatributos a todo en su formulario).

(Nota: es posible que deba agregar buttonal selector si está usando botones para enviar)

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

O

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

Pero sin éxito en un validador personalizado requerido. Para llamar a un envío dinámicamente, he creado un botón de envío oculto falso 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 omita la validación correctamente :)

Esta pregunta es antigua, pero encontré otra forma de usarla $('#formId')[0].submit(), que obtiene el elemento dom en lugar del objeto jQuery, evitando cualquier gancho 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 no tener ninguno inputllamado "submit", o anula la función nombrada submit.

Descubrí que la forma más flexible es usar JQuery:

event.preventDefault():

Por ejemplo, si en lugar de enviar quiero redirigir, 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 hagas 'event.preventDefault ();' omite la validación.

Tengo dos botones para enviar formularios, el botón llamado guardar y salir omite 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();
});

Aquí está la versión más simple, espero que ayude a alguien,

$('#cancel-button').click(function() {
    var $form = $(this).closest('form');
    $form.find('*[data-validation]').attr('data-validation', null);
    $form.get(0).submit();
});

<button type="submit" formnovalidate="formnovalidate">submit</button>

también trabajando