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

167

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'
}); 
Ted
fonte
Especifique também a palavra-chave return at button, para que ela não navegue para fora technote.in/TechNote/Forums/AspnetReply.aspx?post_id=134

Respostas:

285

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" />
quadrado vermelho
fonte
1
Está funcionando com <input />? Adicionei class = "cancel" e não está funcionando. Estou usando o MVC2 com MicrosoftMvcValidation. Obrigado.
VinnyG
4
@ VinnyG - não usado MicrosoftMvcValidation (e nunca) - isso não é o mesmo que validar jquery.
Redsquare
1
é possível obter o mesmo comportamento sem o elemento de entrada? ou seja, posso de alguma forma acionar (de forma documentada, em oposição à resposta de lepe) o envio de formulários e pular a validação ao mesmo tempo?
ivan
10
Nota: isso não funcionará se você adicionar dinamicamente o cancelamento da classe, ou seja $('input[type=submit]').addClass('cancel'), a classe deverá estar presente no carregamento da página.
Lollsque
@lolesque você prov necessidade de chamar o método de validação novamente, a menos que eles mudaram a forma como ele funciona nota para a data sobre esta resposta)
redsquare
107

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

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

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

lepe
fonte
Olá @lepe, você sabe como aplicar novamente a validação de jquery depois de escrever $("form").validate().cancelSubmit = true;. Tentei $("form").validate().cancelSubmit = false;ligar $("form").validate();para o envio do meu botão enviar. Graças
Jaikrat
3
Isso pode ser feito como $(yourForm).data('validator').cancelSubmit = false;Graças
Jaikrat
16

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

TastyCode
fonte
10

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.

BrokeMyLegBiking
fonte
3

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

Simon_Weaver
fonte
que é 4 horas de parafusar em torno de um maldito Pay with PayPalbotão enviar
Simon_Weaver
Isso não funcionou para mim com o modelo MVC 5 padrão. Eu tenho os pacotes Nuget JQuery 1.10.2, JQuery Validation 1.11.1, Microsoft jQuery Unobtrusive Validation 3.0.0. O que funcionou para mim foi substituir as duas linhas no seu código por: $(this).closest('form').data("validator", null).unbind().submit();Isso definirá o validador como nulo e desatá-lo. Depois disso, ele enviará o formulário. Você pode redefinir a validação por esta linha:$.validator.unobtrusive.parse($("#YourUniqueFormId"));
Ralph Jansen
em algum lugar ao longo da linha isso foi corrigido. Pude comentar completamente isso e agora funciona com uma .cancelclasse. NOTA: Se você estiver usando uma = 'imagem' tipo botão enviar, em seguida, a .cancelclasse não funcionará a menos que você mudar ":submit"para ":submit,:image"no plugin jQuery de validação original
Simon_Weaver
2
$("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 :)

Davide Ciarmiello
fonte
Caso você queira excluir apenas uma classe específica da validação, use-a em vez de um asterisco. $("form").validate().settings.ignore = "class-name";
James Poulose
1

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.

bradlis7
fonte
1

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.

Scott Mayers
fonte
1

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

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