Come cancellare i messaggi di errore di validazione jQuery?

Sto usando il plugin di convalida jQuery per la validazione lato client. La funzione editUser() viene richiamata al clic del pulsante “Modifica utente”, che visualizza i messaggi di errore.

Ma voglio cancellare i messaggi di errore sul mio modulo, quando clicco 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 metodo resetForm() :

 var validator = $("#myform").validate( ... ... ); $(".cancel").click(function() { validator.resetForm(); }); 

L’ho preso dalla fonte di uno dei loro demo .

Nota: questo codice non funziona con Bootstrap 3.

Mi sono imbattuto in questo problema me stesso. Ho avuto la necessità di convalidare in modo condizionale parti di un modulo mentre il modulo veniva costruito in base ai passaggi (ad esempio, alcuni input venivano aggiunti dynamicmente durante il runtime). Di conseguenza, a volte un elenco a discesa di selezione avrebbe bisogno di una convalida e, a volte, non lo sarebbe. 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 per jquery.validate .

Ecco cosa mi è venuto in mente:

  • Cancellare gli errori indicando il successo della convalida
  • Gestore chiamate per la visualizzazione degli errori
  • Cancella tutti gli archivi di successo o errori
  • Reimposta la convalida dell’intero modulo
  • Ecco come appare nel codice:

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

    minificato come estensione jQuery:

     $.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 hide gli errori:

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

    Se hai specificato errorClass , chiama quella class per hide invece l’ error (il valore predefinito) che ho usato sopra.

    Se non hai precedentemente salvato i validatori quando li hai allegati al modulo, puoi semplicemente invocare semplicemente

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

    come .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 insieme parziale di valori e fa clic su “Invia”, dovrebbe segnalare alcuni dei campi con errori. Se, tuttavia, cancellano quei valori e premono di nuovo “Invia”, dovrebbero cancellare gli errori. In questo caso, per qualche ragione, non ci sono elementi nella matrice “currentElements” all’interno del validatore, quindi l’esecuzione di .resetForm() non fa assolutamente nulla.

    Ci sono bug pubblicati su questo.

    Fino a quando non li risolvono, devi usare la risposta di Nick Craver, la risposta accettata di NON Pappagalli.

    Puoi usare:

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

    Se vuoi solo cancellare le etichette di validazione puoi usare il codice da jquery.validate.js resetForm ()

     var validator = $('#Form').validate(); validator.submitted = {}; validator.prepareForm(); validator.hideErrors(); validator.elements().removeClass(validatorObject.settings.errorClass); 

    Penso che abbiamo solo bisogno di inserire gli input per pulire tutto

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

    Per chi usa il codice Bootstrap 3 di seguito pulirà tutta la forma: misurazioni, icone e colors …

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

    Sarà ok, quando è necessario convalidarlo di nuovo.

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

    Questo distruggerà tutti gli errori di validazione

    Prova a utilizzare questo per rimuovere la convalida sul 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 di convalida è ansible scrivere questo

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

    Tuttavia, una volta rimosso, se la convalida fallisce, non mostrerà questo riepilogo di convalida perché è stato rimosso. Invece usa hide e display usando il codice seguente

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

    Nessuna delle soluzioni di cui sopra ha funzionato per me. Sono rimasto deluso dal perdere tempo con loro. Tuttavia c’è una soluzione facile.

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

    Nessun errore produrrebbe:

      

    quando si verifica un errore, questo div viene compilato con gli errori e la class viene modificata in errori di convalida della convalida:

      

    La soluzione è molto semplice. Cancellare l’HTML del div che contiene gli errori e quindi riportare la class nello stato valido.

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

    Buona programmazione.

    Se si desidera ripristinare anche numberOfInvalids() , aggiungere la riga seguente nella funzione jquery.validate.js nel numero di riga del file jquery.validate.js : 415.

     this.invalid = {}; 

    L’ho appena fatto

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

    per rimuovere il bordo rosso sui campi di errore di input.

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

    Sto cancellando il modulo con resetForm() . Funziona in tutti i casi tranne uno !!

    Quando carico qualsiasi modulo tramite Ajax e applico la convalida del modulo dopo aver caricato il mio HTML dinamico, dopo quando provo a reimpostare il modulo con resetForm() e fallisce e anche esso svuota di tutta la validazione che sto applicando sugli elementi del modulo.

    Quindi gentilmente non usare questo per i moduli caricati con Ajax O per la convalida inizializzata manualmente.

    PS Devi usare la risposta di Nick Craver per questo scenario come ho spiegato.

    Nel mio caso ho aiutato con l’approccio:

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

    Se si desidera hide una convalida sul lato client che non fa parte di un modulo di invio, è ansible utilizzare il seguente codice:

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

    validator.resetForm() cancella il testo di errore. Ma se vuoi rimuovere il bordo ROSSO dai campi devi rimuovere l’ has-error di hash della class

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