¿Cómo borrar los mensajes de error de validación de jQuery?

Estoy usando el complemento de validación jQuery para la validación del lado del cliente. editUser()Se llama a la función al hacer clic en el botón 'Editar usuario', que muestra mensajes de error.

Pero quiero borrar los mensajes de error en mi formulario, cuando hago clic en el botón 'Borrar', que llama a una función 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
    }
}

Quieres el resetForm()método:

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

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

Lo tomé de la fuente de una de sus demos .

Nota: Este código no funcionará para Bootstrap 3.

Me encontré con este problema yo mismo. Tuve la necesidad de validar condicionalmente partes de un formulario mientras el formulario se construía en función de los pasos (es decir, ciertas entradas se agregaron dinámicamente durante el tiempo de ejecución). Como resultado, a veces un menú desplegable de selección necesitaría validación, y a veces no. Sin embargo, al final de la prueba, necesitaba ser validado. Como resultado, necesitaba un método robusto que no fuera una solución alternativa. Consulté el código fuente de jquery.validate.

Esto es lo que se me ocurrió:

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

Si simplemente quiere ocultar los errores:

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

Si especificó el errorClass, llame a esa clase para ocultar en su lugar error(el valor predeterminado) que utilicé anteriormente.

Si anteriormente no guardó los validadores aparte al adjuntarlos al formulario, también puede simplemente invocar

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

ya .validate()que devolverá los mismos validadores que adjuntó anteriormente (si lo hizo).

Si desea hacerlo sin usar una variable separada, entonces

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

Lamentablemente, validator.resetForm()NO funciona, en muchos casos.

Tengo un caso en el que, si alguien presiona "Enviar" en un formulario con valores en blanco, debería ignorar el "Enviar". Sin errores. Eso es bastante fácil. Si alguien pone un conjunto parcial de valores y presiona "Enviar", debe marcar algunos de los campos con errores. Sin embargo, si eliminan esos valores y presionan "Enviar" nuevamente, debería borrar los errores. En este caso, por alguna razón, no hay elementos en la matriz "currentElements" dentro del validador, por lo que la ejecución .resetForm()no hace absolutamente nada.

Hay errores publicados en esto.

Hasta el momento en que los arreglen, debe usar la respuesta de Nick Craver, NO la respuesta aceptada de Parrots.

Puedes usar:

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

Creo que solo necesitamos ingresar las entradas para limpiar todo

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

Si solo desea borrar las etiquetas de validación, puede usar el código de jquery.validate.js resetForm ()

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

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

Para aquellos que usan el código Bootstrap 3 a continuación, limpiarán todo el formulario: mensajes, íconos y colores ...

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

Probé con:

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

Estará bien, cuando necesite validarlo nuevamente.

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

Esto destruirá todos los errores de validación.

En mi caso ayudó con el enfoque:

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

Si desea ocultar una validación en el lado del cliente que no forma parte del envío de un formulario, puede usar el siguiente código:

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

Intenté cada respuesta. Lo único que funcionó para mí fue:

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

Utilizando:

jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/

Ninguna de las otras soluciones funcionó para mí. resetForm()está claramente documentado para restablecer el formulario real, por ejemplo, eliminar los datos del formulario, que no es lo que quiero. Simplemente a veces no hace eso, sino que simplemente elimina los errores. Lo que finalmente funcionó para mí es esto:

validator.hideThese(validator.errors());

Intente usar esto para eliminar la validación al hacer clic en 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);
                }
            } 
        }

Tratar de usar:

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

en el botón Borrar.

Para eliminar el resumen de validación, puede escribir esto

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

Sin embargo, una vez que eliminó, nuevamente si la validación falló, no mostrará este resumen de validación porque lo eliminó. En su lugar, use hide and display usando el código a continuación

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

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

Ninguna de las soluciones anteriores funcionó para mí. Me decepcionó perder el tiempo con ellos. Sin embargo, hay una solución fácil.

La solución se logró comparando el marcado HTML para el estado válido y el marcado HTML para el estado de error.

Ningún error produciría:

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

cuando ocurre un error, este div se llena con los errores y la clase se cambia a validation-summary-errors:

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

La solución es muy simple. Borre el HTML del div que contiene los errores y luego cambie la clase nuevamente al estado válido.

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

Feliz codificación

Si desea restablecer numberOfInvalids()también, agregue la siguiente línea en la resetFormfunción en jquery.validate.jsel número de línea del archivo: 415.

this.invalid = {};

Lo acabo de hacer

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

para eliminar el borde rojo en los campos de error de entrada.

$(FORM_ID).validate().resetForm(); Todavía no funciona como se esperaba.

Estoy limpiando la forma con resetForm(). Funciona en todos los casos excepto uno !!

Cuando cargo cualquier formulario a través de Ajax y aplico la validación del formulario después de cargar mi dinámica HTML, luego cuando intento restablecer el formulario con resetForm()y falla y también borró toda la validación que estoy aplicando en los elementos del formulario.

Por lo tanto, no utilice esto para formularios cargados con Ajax O validación inicializada manualmente.

PD : Necesitas usar la respuesta de Nick Craver para tal escenario como expliqué.

validator.resetForm()Método de texto de error claro. Pero si desea eliminar el borde ROJO de los campos, debe eliminar la clasehas-error

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

Función utilizando los enfoques de Travis J , JLewkovich y 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"));

Escriba su propio código porque todos usan un nombre de clase diferente. Estoy restableciendo la validación de jQuery por este código.

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