validar - jquery validate

Complemento jQuery Validation: inhabilitar 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 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 "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 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

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

El complemento de validación jquery (no el discreto de Microsoft) le permite colocar una clase .cancel en su botón de envío para eludir completamente la validación (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 confundas esto con type=''reset'' que es algo completamente diferente)

Desafortunadamente, el jquery.validation.unobtrusive.js manejo de validación de jquery.validation.unobtrusive.js (ASP.NET MVC) daña el comportamiento predeterminado del plugin 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 ''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 al principio lo intentas, parece que esto no está funcionando, asegúrate de no estar realizando una ida y vuelta al servidor y viendo una página generada por el servidor con errores. Tendrá que omitir la validación en el lado del servidor por otros medios: esto solo permite que el formulario se .ignore al lado del cliente sin errores (la alternativa sería agregar atributos .ignore a todo en su formulario).

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

Answer 2

Agregue el atributo formnovalidate a la entrada

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

Agregar class = "cancelar" ahora está en desuso

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

Answer 3

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

event.preventDefault():

Por ejemplo, si en lugar de enviar quiero redirigir, puedo:

$("#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 deseo 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 ();'' usted elude la validación

Answer 4

Esta pregunta es antigua, pero encontré otra forma de utilizarla $(''#formId'')[0].submit() , que obtiene el elemento dom 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 no tener ninguna input llamada "enviar", o anula la función denominada submit .

Answer 5

Otra forma (no documentada) de hacerlo, es llamar:

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

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

Answer 6

Otra forma más (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-validation/issues/725#issuecomment-17601443

Answer 7

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

p.ej

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

Consulte la documentación jQuery Validator de esta función aquí: Saltarse la validación en enviar

EDITAR :

La técnica anterior ha quedado obsoleta y se ha reemplazado por el atributo formnovalidate .

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

Answer 8

Puede usar la opción onsubmit: false (consulte la documentation ) al conectar la validación, que no se validará en el momento del envío 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.

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 superas, la experiencia del usuario es muy buena.

Answer 9

Tengo dos botones para enviar el formulario, 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 requerido personalizado. Para llamar 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 :)