Come cancellare i messaggi di errore di convalida jQuery?

Sto usando il plugin di convalida jQuery per la convalida lato client. La funzione editUser()viene chiamata facendo clic sul pulsante "Modifica utente", che visualizza i messaggi di errore.

Ma desidero cancellare i messaggi di errore sul mio modulo, quando faccio clic sul pulsante "Cancella", che chiama una funzione separata 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
    }
}

Vuoi il resetForm()metodo:

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

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

L'ho preso dalla fonte di una delle loro demo .

Nota: questo codice non funzionerà per Bootstrap 3.

Mi sono imbattuto in questo problema da solo. Ho avuto la necessità di convalidare condizionalmente parti di un modulo mentre il modulo veniva costruito sulla base di passaggi (ovvero alcuni input venivano aggiunti dinamicamente durante il runtime). Di conseguenza, a volte un menu a discesa selezionato dovrebbe essere convalidato, a volte no. Tuttavia, entro la fine della prova, doveva essere convalidato. Di conseguenza, avevo bisogno di un metodo robusto che non fosse una soluzione alternativa. Ho consultato il codice sorgente di jquery.validate.

Ecco cosa mi è venuto in mente:

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 vuoi semplicemente nascondere gli errori:

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

Se hai specificato il errorClass, chiama invece quella classe per nascondere error(impostazione predefinita) che ho usato sopra.

Se in precedenza non hai salvato i validatori a parte quando li hai collegati al modulo, puoi anche semplicemente invocare

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

poiché .validate()restituirà gli stessi validatori che hai allegato in precedenza (se lo hai fatto).

Se vuoi farlo senza usare una variabile separata, allora

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

Sfortunatamente, validator.resetForm()NON funziona, in molti casi.

Ho un caso in cui, se qualcuno preme "Invia" su un modulo con valori vuoti, dovrebbe ignorare "Invia". Nessun errore È abbastanza facile. Se qualcuno inserisce un set parziale di valori e preme "Invia", dovrebbe contrassegnare alcuni campi con errori. Se, tuttavia, cancellano quei valori e premono di nuovo "Invia", dovrebbero cancellare gli errori. In questo caso, per qualche motivo, non ci sono elementi nell'array "currentElements" all'interno del validatore, quindi l'esecuzione .resetForm()non fa assolutamente nulla.

Ci sono bug pubblicati su questo.

Fino a quando non li risolvono, è necessario utilizzare la risposta di Nick Craver, NON la risposta accettata da Parrots.

Puoi usare:

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

Penso che dobbiamo solo inserire gli input per pulire tutto

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

Se si desidera solo cancellare le etichette di convalida, è possibile utilizzare il codice da jquery.validate.js resetForm ()

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

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

Per coloro che usano il codice Bootstrap 3 di seguito pulirà l'intero formato: messaggi, icone e colori ...

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

Ho provato con:

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

Andrà bene, quando è necessario convalidarlo di nuovo.

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

Questo distruggerà tutti gli errori di convalida

Nel mio caso aiutato con l'approccio:

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

Se desideri nascondere una convalida sul lato client che non fa parte di un modulo, puoi utilizzare il seguente codice:

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

Ho provato ogni singola risposta. L'unica cosa che ha funzionato per me è stata:

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

usando:

jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/

Nessuna delle altre soluzioni ha funzionato per me. resetForm()è chiaramente documentato per ripristinare il modulo effettivo, ad esempio rimuovere i dati dal modulo, che non è quello che voglio. A volte capita di non farlo, ma semplicemente di rimuovere gli errori. Ciò che finalmente ha funzionato per me è questo:

validator.hideThese(validator.errors());

Prova a utilizzare questo per rimuovere la convalida facendo clic su Annulla

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

Prova ad usare:

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

sul pulsante Cancella.

Per rimuovere il riepilogo della convalida è possibile scrivere questo

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

Tuttavia, una volta rimosso, di nuovo se la convalida non è riuscita, non verrà visualizzato questo riepilogo della convalida perché è stato rimosso. Invece usa hide e display usando il codice qui sotto

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

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

Nessuna delle soluzioni sopra ha funzionato per me. Sono rimasto deluso dal perdere tempo con loro. Tuttavia, esiste una soluzione semplice.

La soluzione è stata ottenuta confrontando il markup HTML per lo stato valido e il markup HTML per lo stato di errore.

Nessun errore produrrebbe:

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

quando si verifica un errore, questo div viene popolato con gli errori e la classe viene modificata in validation-summary-errors:

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

La soluzione è molto semplice. Cancella l'HTML del div che contiene gli errori e poi riporta la classe allo stato valido.

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

Buona codifica.

Se si desidera ripristinare numberOfInvalids()anche aggiungere la seguente riga in resetFormfunzione nel jquery.validate.jsnumero di riga del file: 415.

this.invalid = {};

L'ho appena fatto

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

per rimuovere il bordo rosso nei campi dell'errore di input.

$(FORM_ID).validate().resetForm(); non funziona ancora come previsto.

Sto cancellando il modulo con resetForm(). Funziona in ogni caso tranne uno !!

Quando carico qualsiasi modulo tramite Ajax e applico la convalida del modulo dopo aver caricato la mia dinamica HTML, quindi dopo quando provo a reimpostare il modulo con resetForm()e non riesce e anche cancellato tutta la convalida che sto applicando sugli elementi del modulo.

Quindi, gentilmente, non utilizzarlo per i moduli caricati Ajax o per la convalida inizializzata manualmente.

PS Devi usare la risposta di Nick Craver per lo scenario che ho spiegato.

validator.resetForm()metodo per cancellare il testo dell'errore. Ma se vuoi rimuovere il bordo ROSSO dai campi devi rimuovere la classehas-error

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

Funziona usando gli approcci di 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"));

Scrivi il tuo codice perché ognuno usa un nome di classe diverso. Sto ripristinando la convalida jQuery con questo codice.

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