Plugin de validação jQuery: desabilite a validação para os botões de envio especificados

Tenho um formulário com vários campos que estou validando (alguns com métodos adicionados para validação personalizada) com o excelente plug-in de validação jQuery de Jörn Zaeffere. Como contornar a validação com controles de envio especificados (em outras palavras, validação de disparo com algumas entradas de envio, mas não dispara a validação com outros)? Isso seria semelhante ao ValidationGroups com controles padrão do validador do ASP.NET.

Minha situação:

É com o ASP.NET WebForms, mas você pode ignorá-lo, se desejar. No entanto, estou usando a validação mais como uma "recomendação": em outras palavras, quando o formulário é enviado, a validação é acionada, mas em vez de uma mensagem "necessária" exibida, uma "recomendação" mostra que diz algo ao longo da linha "você perdeu os seguintes campos .... deseja continuar mesmo assim? " Nesse ponto do contêiner de erro, existe outro botão de envio agora visível que pode ser pressionado, o que ignoraria a validação e o envio de qualquer maneira. Como contornar os formulários .validate () para este controle de botão e ainda publicar?

A amostra Comprar e vender uma casa em http://jquery.bassistance.de/validate/demo/multipart/ permite isso para acessar os links anteriores, mas o faz criando métodos personalizados e adicionando-o ao validador. Eu preferiria não precisar criar métodos personalizados duplicando a funcionalidade já no plug-in de validação.

A seguir, uma versão abreviada do script imediatamente aplicável que eu tenho agora:

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

Você pode adicionar uma classe CSS de cancela um botão de envio para suprimir a validação

por exemplo

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

Consulte a documentação do jQuery Validator desse recurso aqui: Ignorando a validação ao enviar

EDIT :

A técnica acima foi descontinuada e substituída pelo formnovalidateatributo

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

Outra maneira (não documentada) de fazer isso é chamar:

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

no evento de clique do botão (por exemplo).

Ainda outra maneira (dinâmica):

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

E para reativá-lo, basta definir o valor padrão:

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

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

Adicionar atributo formnovalidate à entrada

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

A adição de class = "cancel" agora está obsoleta

Consulte os documentos para Ignorar a validação ao enviar neste link

Você pode usar a opção onsubmit: false (consulte a documentação ) ao conectar a validação que não será validada no envio do formulário. E, em seguida, no botão asp: adicione um OnClientClick = $ ('# aspnetForm'). Valid (); para verificar explicitamente se o formulário é válido.

Você pode chamar isso de modelo de aceitação, em vez da exclusão descrita acima.

Observe que também estou usando a validação de jquery com o ASP.NET WebForms. Existem alguns problemas para navegar, mas depois de resolvê-los, a experiência do usuário é muito boa.

(Extensão de @lepe's e @redsquareresposta para ASP.NET MVC+ jquery.validate.unobtrusive.js)

O plug-in de validação de jquery (não o discreto da Microsoft) permite que você coloque uma .cancelclasse no botão de envio para ignorar completamente a validação (como mostrado na resposta aceita).

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

(não confunda isso com type='reset'algo completamente diferente)

Infelizmente, o jquery.validation.unobtrusive.jscódigo de manipulação de validação (ASP.NET MVC) meio que estraga o comportamento padrão do plugin jquery.validate .

Isso é o que eu criei para permitir que você coloque .cancelo botão enviar, como mostrado acima. Se a Microsoft "corrigir" isso, você poderá apenas remova 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: Se, na primeira tentativa, parecer que isso não está funcionando - verifique se você não está viajando de ida e volta ao servidor e vendo uma página gerada pelo servidor com erros. Você precisará ignorar a validação no servidor por outros meios - isso permite que o formulário seja enviado ao cliente sem erros (a alternativa seria adicionar .ignoreatributos a tudo em seu formulário).

(Observação: pode ser necessário adicionar buttonao seletor se você estiver usando os botões para enviar)

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

Ou

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

Mas sem sucesso em um validador requerido personalizado. Para chamar um envio dinamicamente, criei um botão de envio oculto falso com 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();

Agora pule a validação corretamente :)

Esta pergunta é antiga, mas eu encontrei outra maneira de contornar isso é o uso $('#formId')[0].submit(), que obtém o elemento dom em vez do objeto jQuery, ignorando assim qualquer gancho de validação. Este botão envia o formulário pai que contém a entrada.

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

Além disso, verifique se você não tem nenhum inputnome "submit" ou substitui a função nomeada submit.

Eu descobri que a maneira mais flexível é usar o JQuery:

event.preventDefault():

Por exemplo, se em vez de enviar eu quero redirecionar, eu posso fazer:

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

ou posso enviar os dados para um endpoint diferente (por exemplo, se eu quiser alterar a ação):

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

Depois de fazer 'event.preventDefault ();' você ignora a validação.

Eu tenho dois botões para envio de formulários, o botão chamado salvar e sair ignora a validação:

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

Aqui está a versão mais simples, espero que ajude alguém,

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