plugin de validação do jQuery: desativar a validação para botões de envio especificados

Question

Eu 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 de jQuery da Jörn Zaeffere. Como você contorna a validação com controles de envio especificados (em outras palavras, validação de incêndio com algumas entradas de envio, mas não aciona a validação com outras)? Isso seria semelhante aos grupos de validação com controles padrão do validador ASP.NET.

Minha situação:

É com o ASP.NET WebForms, mas você pode ignorar isso, 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 dispara, mas em vez de uma mensagem "necessária" exibindo, uma "recomendação" mostra que diz algo ao longo da linha de "você Perdeu os seguintes campos .... você deseja proceder de qualquer maneira? " Nesse ponto do contêiner de erro, agora há outro botão de envio visível que pode ser pressionado 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 postar?

A compra e venda de uma amostra de casa em http://jquery.bassistance.de/validate/demo/multipart/ Permite isso para atingir os links anteriores, mas o faz através da criação de métodos personalizados e a adicioná -lo ao validador. Eu preferiria não precisar criar métodos personalizados que dupliquem a funcionalidade já no plug -in de validação.

A seguir, é apresentada 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'
}); 

Answer 1

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

por exemplo

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

Veja a documentação do Validador JQuery deste recurso aqui: Pular a validação no envio

---

EDITAR:

A técnica acima foi preterida e substituída pelo formnovalidate atributo.

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

Answer 2

Outra maneira (sem documentos) de fazê -lo é ligar:

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

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

Answer 3

Mais uma maneira (dinâmica):

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

E para reativá-lo, acabamos de reduzir o valor padrão:

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

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

Answer 4

Adicionar atributo formnovalidato à entrada

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

Adicionando class = "cancel" agora está preso

Consulte os documentos para pular a validação em envio sobre isso link

Answer 5

Você pode usar o OnSubmit: false opção (veja documentação) ao conectar a validação que não validará no envio do formulário. E então no seu ASP: Button Adicione um OnClientClick = $ ('#aspnetform'). Valid (); Para verificar explicitamente se o formulário é válido.

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

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

Answer 6

(Extensão de @lepe'areia @redsquare resposta para ASP.NET MVC + jquery.validate.unobtrusive.js)

---

o plugin de validação do jQuery (não o Microsoft discreto) permite que você coloque um .cancel Classe no botão Enviar para ignorar completamente a validação (conforme 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' o que é algo completamente diferente)

Infelizmente, o jquery.validation.unobtrusive.js Código de manuseio de validação (ASP.NET MVC) meio que estraga o JQuery.validate o comportamento padrão do plug -in.

Isso é o que eu criei para permitir que você coloque .cancel No botão Enviar como mostrado acima. Se a Microsoft 'consertar' isso, você poderá apenas remover esse 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, no início, tentar, parece que isso não está funcionando - verifique se você não está arredondado para o servidor e vendo uma página gerada pelo servidor com erros. Você precisará ignorar a validação do lado do servidor por alguns outros meios - isso apenas permite que o formulário seja enviado do lado do cliente sem erros (a alternativa seria adicionar .ignore atributos para tudo em sua forma).

(Nota: pode ser necessário adicionar button para o seletor, se você estiver usando botões para enviar)

Answer 7

Esta pergunta é antiga, mas encontrei outra maneira de contornar $('#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 inputé nomeado "submeter", ou substitui a função denominada submit.

Answer 8

Descobri que a maneira mais flexível é usar o jQuery:

event.preventDefault():

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

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

Ou posso enviar os dados para um terminal diferente (por exemplo, se 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.

Answer 9

Eu tenho dois botões para envio de formulário, 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();
});

Answer 10

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

Ou

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

Mas sem sucesso em um validador exigido personalizado. Para ligar para o 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 :)

Answer 11

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