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


167

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

También debe especificar la palabra clave en el botón de retorno, por lo que no va a desplazarse fuera technote.in/TechNote/Forums/AspnetReply.aspx?post_id=134

Respuestas:


286

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" />

1
¿Funciona con <input />? Agregué class = "cancel" y no funciona. Estoy usando MVC2 con MicrosoftMvcValidation. Gracias.
VinnyG

44
@VinnyG - no se utiliza MicrosoftMvcValidation (y nunca lo haría) - esto no es lo mismo que jquery validate.
redsquare

1
¿Es posible lograr el mismo comportamiento sin el elemento de entrada? es decir, ¿puedo de alguna manera activar (de forma documentada, en oposición a la respuesta de lepe) el envío de formularios y omitir la validación al mismo tiempo?
Ivan

10
Nota: esto no funciona si agrega dinámicamente la cancelación de la clase, es decir $('input[type=submit]').addClass('cancel'), la clase debe estar presente en la carga de la página.
lolesque

@lolesque, probablemente deba volver a llamar al método de validación a menos que hayan cambiado la forma en que funciona, tenga en cuenta la fecha en esta respuesta)
redsquare

107

Otra forma (indocumentada) de hacerlo es llamar:

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

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


Hola @lepe, sabes cómo volver a aplicar la validación de jquery después de escribir $("form").validate().cancelSubmit = true;. Intenté $("form").validate().cancelSubmit = false;y llamé $("form").validate();al envío de mi botón de envío. Gracias
Jaikrat

3
Se puede hacer como $(yourForm).data('validator').cancelSubmit = false;gracias
Jaikrat


16

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


10

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.


3

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


son 4 horas de joder un maldito Pay with PayPalbotón de envío
Simon_Weaver

Esto no funcionó para mí con la plantilla MVC 5 predeterminada. Tengo paquetes Nuget JQuery 1.10.2, JQuery Validation 1.11.1, Microsoft jQuery Unobtrusive Validation 3.0.0. Lo que funcionó para mí es reemplazar las dos líneas en su código por: $(this).closest('form').data("validator", null).unbind().submit();Esto configurará el validador en nulo y lo desasociará. Después de eso, enviará el formulario. Puede restablecer la validación por esta línea:$.validator.unobtrusive.parse($("#YourUniqueFormId"));
Ralph Jansen

en algún lugar a lo largo de la línea esto fue arreglado. He podido comentar esto completamente y ahora funciona con una .cancelclase. NOTA: Si está usando un = 'imagen' de tipo botón de envío a continuación, la .cancelclase no funcionará a menos que cambie ":submit"a ":submit,:image"en el plugin de jQuery original de validación
Simon_Weaver

2
$("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 :)


En caso de que desee excluir una clase específica de la validación, puede usarla en lugar de un asterisco. $("form").validate().settings.ignore = "class-name";
James Poulose

1

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.


1

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.


1

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

0

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

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

también trabajando

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.