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

Question

Tengo un formulario con múltiples 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 elude la validación con controles de envío específicos (en otras palabras, activa la validación con algunas entradas de envío, pero no 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 activa pero en lugar de una "requerida". mensaje que se muestra, una " recomendación " muestra que dice algo en la línea de "se perdió 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 creando 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'
}); 

Answer 1

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 Validator de esta función aquí: Omitiendo validación al enviar

---

EDITAR :

La técnica anterior ha quedado en desuso y se ha reemplazado con el atributo formnovalidate .

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

Answer 2

Otra forma (no documentada) de hacerlo es llamar:

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

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

Answer 3

Otra forma (dinámica):

$("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- validación / problemas / 725 # issuecomment-17601443

Answer 4

Añadir atributo formnovalidate a la entrada

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

Añadiendo clase = " cancelar " ahora está en desuso

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

Answer 5

Puede usar la opción onsubmit: false (consulte documentación ) al conectar 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.

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

Answer 6

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

---

El jquery validation plugin (no el Microsoft discreto) le permite poner un .cancel 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 código jquery.validation.unobtrusive.js de manejo de validación (ASP.NET MVC) daña un poco el comportamiento predeterminado del complemento jquery.validate .

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 'arregla' esto, entonces puede simplemente 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 viendo una página generada por el servidor con errores. Deberá omitir la validación en el lado del servidor por otros medios: esto solo permite que el formulario se envíe del lado del cliente sin errores (la alternativa sería agregar atributos .ignore a todo en su formulario) .

(Nota: es posible que deba agregar el botón al selector si está usando botones para enviar)

Answer 7

Esta pregunta es antigua, pero encontré otra forma de evitarla usando $ ('# 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 ninguna entrada llamada " submit " ;, o anula la función llamada submit .

Answer 8

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

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.

Answer 9

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

Answer 10

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

O

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

Pero sin éxito en un validador personalizado requerido. Para llamar a un envío de forma dinámica, 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 :)

Answer 11

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