Como limpar as mensagens de erro de validação jQuery?

Estou usando o plug-in de validação jQuery para validação do lado do cliente. A função editUser()é chamada ao clicar no botão 'Editar usuário', que exibe mensagens de erro.

Mas quero limpar as mensagens de erro no meu formulário, quando clico no botão 'Limpar', que chama uma função separada clearUser().

function clearUser() {
    // Need to clear previous errors here
}

function editUser(){
    var validator = $("#editUserForm").validate({
        rules: {
            userName: "required"
        },
        errorElement: "span",
        messages: {
            userName: errorMessages.E2
        }
    });

    if(validator.form()){
        // Form submission code
    }
}

Você quer o resetForm()método:

var validator = $("#myform").validate(
   ...
   ...
);

$(".cancel").click(function() {
    validator.resetForm();
});

Peguei na fonte de uma de suas demonstrações .

Nota: Este código não funcionará no Bootstrap 3.

Eu me deparei com esse problema. Eu tive a necessidade de validar condicionalmente partes de um formulário enquanto o formulário estava sendo construído com base em etapas (ou seja, certas entradas foram dinamicamente anexadas durante o tempo de execução). Como resultado, algumas vezes um menu suspenso de seleção precisaria de validação e outras vezes não. No entanto, no final da provação, ele precisava ser validado. Como resultado, eu precisava de um método robusto que não fosse uma solução alternativa. Eu consultei o código fonte para jquery.validate.

Aqui está o que eu vim com:

function clearValidation(formElement){
 //Internal $.validator is exposed through $(form).validate()
 var validator = $(formElement).validate();
 //Iterate through named elements inside of the form, and mark them as error free
 $('[name]',formElement).each(function(){
   validator.successList.push(this);//mark as error free
   validator.showErrors();//remove error messages if present
 });
 validator.resetForm();//remove error class on name elements and clear history
 validator.reset();//remove all error and success data
}
//used
var myForm = document.getElementById("myFormId");
clearValidation(myForm);

$.fn.clearValidation = function(){var v = $(this).validate();$('[name]',this).each(function(){v.successList.push(this);v.showErrors();});v.resetForm();v.reset();};
//used:
$("#formId").clearValidation();

Se você deseja simplesmente ocultar os erros:

$("#clearButton").click(function() {
  $("label.error").hide();
  $(".error").removeClass("error");
});

Se você especificou o errorClass, chame essa classe para ocultar error(o padrão) que eu usei acima.

Se você não salvou anteriormente os validadores ao anexá-los ao formulário, também pode simplesmente chamar

$("form").validate().resetForm();

como .validate()retornará os mesmos validadores que você anexou anteriormente (se você fez isso).

Se você quiser fazê-lo sem usar uma variável separada, então

$("#myForm").data('validator').resetForm();

Infelizmente, validator.resetForm()NÃO funciona, em muitos casos.

Eu tenho um caso em que, se alguém clicar no "Enviar" em um formulário com valores em branco, ele deverá ignorar o "Enviar". Sem erros. Isso é fácil o suficiente. Se alguém colocar um conjunto parcial de valores e clicar em "Enviar", deve sinalizar alguns dos campos com erros. Se, no entanto, eles apagarem esses valores e clicarem em "Enviar" novamente, deverá limpar os erros. Nesse caso, por algum motivo, não há elementos na matriz "currentElements" dentro do validador, portanto, a execução .resetForm()não faz absolutamente nada.

Há bugs publicados nisso.

Até o momento em que eles os corrigem, você precisa usar a resposta de Nick Craver, a resposta NÃO aceita pelos papagaios.

Você pode usar:

$("#myform").data('validator').resetForm();

Eu acho que só precisamos inserir as entradas para limpar tudo

$("#your_div").click(function() {
  $(".error").html('');
  $(".error").removeClass("error");
});

Se você quiser apenas rótulos de validação claros, poderá usar o código de jquery.validate.js resetForm ()

var validator = $('#Form').validate();

validator.submitted = {};
validator.prepareForm();
validator.hideErrors();
validator.elements().removeClass(validatorObject.settings.errorClass);

Para aqueles que usam o código do Bootstrap 3 abaixo, limparão todo o formulário: mensagens, ícones e cores ...

$('.form-group').each(function () { $(this).removeClass('has-success'); });
$('.form-group').each(function () { $(this).removeClass('has-error'); });
$('.form-group').each(function () { $(this).removeClass('has-feedback'); });
$('.help-block').each(function () { $(this).remove(); });
$('.form-control-feedback').each(function () { $(this).remove(); });

Eu testei com:

$("div.error").remove();
$(".error").removeClass("error");

Tudo ficará bem quando você precisar validá-lo novamente.

var validator = $("#myForm").validate();
validator.destroy();

Isso destruirá todos os erros de validação

No meu caso, ajudou na abordagem:

$(".field-validation-error span").hide();

Se você deseja ocultar uma validação no lado do cliente que não faz parte de um envio de formulário, use o seguinte código:

$(this).closest("div").find(".field-validation-error").empty();
$(this).removeClass("input-validation-error");

Tentei todas as respostas. A única coisa que funcionou para mim foi:

$("#editUserForm").get(0).reset();

Usando:

jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/

Nenhuma das outras soluções funcionou para mim. resetForm()está claramente documentado para redefinir o formulário real, por exemplo, remover os dados do formulário, o que não é o que eu quero. Às vezes acontece que não faz isso, mas apenas remove os erros. O que finalmente funcionou para mim é o seguinte:

validator.hideThese(validator.errors());

Tente usar isso para remover a validação no clique em cancelar

 function HideValidators() {
            var lblMsg = document.getElementById('<%= lblRFDChild.ClientID %>');
            lblMsg.innerHTML = "";           
            if (window.Page_Validators) {
                for (var vI = 0; vI < Page_Validators.length; vI++) {
                    var vValidator = Page_Validators[vI];
                    vValidator.isvalid = true;
                    ValidatorUpdateDisplay(vValidator);
                }
            } 
        }

Tente usar:

onClick="$('.error').remove();"

no botão Limpar.

Para remover o resumo da validação, você pode escrever este

$('div#errorMessage').remove();

No entanto, após a remoção, novamente, se a validação falhar, ele não mostrará este resumo de validação porque você a removeu. Em vez disso, use hide e display usando o código abaixo

$('div#errorMessage').css('display', 'none');

$('div#errorMessage').css('display', 'block');  

Nenhuma das soluções acima funcionou para mim. Fiquei decepcionado por desperdiçar meu tempo com eles. No entanto, existe uma solução fácil.

A solução foi alcançada comparando a marcação HTML para o estado válido e a marcação HTML para o estado de erro.

Nenhum erro produziria:

        <div class="validation-summary-valid" data-valmsg-summary="true"></div>

quando ocorre um erro, essa div é preenchida com os erros e a classe é alterada para validation-summary-errors:

        <div class="validation-summary-errors" data-valmsg-summary="true"> 

A solução é muito simples. Limpe o HTML da div que contém os erros e altere a classe novamente para o estado válido.

        $('.validation-summary-errors').html()            
        $('.validation-summary-errors').addClass('validation-summary-valid');
        $('.validation-summary-valid').removeClass('validation-summary-errors');

Feliz codificação.

Se você deseja redefinir numberOfInvalids()também, adicione a seguinte resetFormfunção de jquery.validate.jslinha no número da linha do arquivo: 415.

this.invalid = {};

eu apenas fiz

$('.input-validation-error').removeClass('input-validation-error');

para remover a borda vermelha nos campos de erro de entrada.

$(FORM_ID).validate().resetForm(); ainda não está funcionando como esperado.

Estou limpando a forma com resetForm(). Funciona em todos os casos, exceto um !!

Quando carrego qualquer formulário via Ajax e aplico a validação de formulário após carregar minha dinâmica HTML, depois quando tento redefinir o formulário resetForm()e ele falha, além de liberar toda a validação que estou aplicando nos elementos do formulário.

Portanto, não use isso para formulários carregados no Ajax OU para validação inicializada manualmente.

PS: Você precisa usar a resposta de Nick Craver para esse cenário, como expliquei.

validator.resetForm()método limpar texto de erro. Mas se você deseja remover a borda VERMELHA dos campos, é necessário remover a classehas-error

$('#[FORM_ID] .form-group').removeClass('has-error');

Função usando as abordagens de Travis J , JLewkovich e Nick Craver ...

// NOTE: Clears residual validation errors from the library "jquery.validate.js". 
// By Travis J and Questor
// [Ref.: https://stackoverflow.com/a/16025232/3223785 ]
function clearJqValidErrors(formElement) {

    // NOTE: Internal "$.validator" is exposed through "$(form).validate()". By Travis J
    var validator = $(formElement).validate();

    // NOTE: Iterate through named elements inside of the form, and mark them as 
    // error free. By Travis J
    $(":input", formElement).each(function () {
    // NOTE: Get all form elements (input, textarea and select) using JQuery. By Questor
    // [Refs.: https://stackoverflow.com/a/12862623/3223785 , 
    // https://api.jquery.com/input-selector/ ]

        validator.successList.push(this); // mark as error free
        validator.showErrors(); // remove error messages if present
    });
    validator.resetForm(); // remove error class on name elements and clear history
    validator.reset(); // remove all error and success data

    // NOTE: For those using bootstrap, there are cases where resetForm() does not 
    // clear all the instances of ".error" on the child elements of the form. This 
    // will leave residual CSS like red text color unless you call ".removeClass()". 
    // By JLewkovich and Nick Craver
    // [Ref.: https://stackoverflow.com/a/2086348/3223785 , 
    // https://stackoverflow.com/a/2086363/3223785 ]
    $(formElement).find("label.error").hide();
    $(formElement).find(".error").removeClass("error");

}

clearJqValidErrors($("#some_form_id"));

Escreva o próprio código, porque todo mundo usa um nome de classe diferente. Estou redefinindo a validação do jQuery por esse código.

$('.error').remove();
        $('.is-invalid').removeClass('is-invalid');