jQuery plug-in di convalida: aggiungi/rimuovi classe al/dal contenitore degli errori dell'elemento

Question

Sto lavorando con il plugin jQuery Validation e ho scritto il seguente codice che aggiunge una classe al genitore dell'elemento (<input>) (<label>) se non valido, oltre a inserire l'elemento di errore effettivo (<span>) prima dello <br>.

il codice HTML ...

<label> 
    text<br><input> 
</label> 

... e jQuery.

$("#form_to_validate").validate({ 
    rules: { 
    ... 
    }, 
    errorElement: "span", 
    errorPlacement: function(error, element) { 
     element.parent().addClass('error'); 
     error.insertBefore(element.parent().children("br")); 
    } 
}); 

Quindi, se un elemento del modulo non convalida, si trasforma in:

<label class="error"> 
    text<span>error text</span><br><input> 
</label> 

Questa grande opera, tuttavia, se il contenuto di un campo viene corretto e diventa valido, la classe ovviamente doesn' t viene rimosso dal suo genitore (in realtà, nemmeno l'elemento error, invece ottiene solo una proprietà CSS display: none;). Come posso verificare se un elemento diventa valido e rimuovere la sua classe genitore in caso affermativo?

Qualsiasi aiuto sarebbe molto apprezzato!

---

Modificato: Aggiunta di ulteriori informazioni.

Answer 1

Dopo alcuni scavi più pesanti ho trovato la risposta proprio sotto il mio naso, ma sfortunatamente per me, ben nascosta. Il plug-in ha una funzione di evidenziazione integrata (sorpresa, sorpresa). Normalmente sarebbe evidenziare/unhighlight l'elemento, ma può essere facilmente convertito per lavorare sul genitore dell'elemento:

$("#form_to_validate").validate({ 
    rules: { 
    ... 
    }, 
    errorElement: "span", 
    errorPlacement: function(error, element) { 
     error.insertBefore(element.parent().children("br")); 
    }, 
    highlight: function(element) { 
     $(element).parent().addClass("error"); 
    }, 
    unhighlight: function(element) { 
     $(element).parent().removeClass("error"); 
    } 
}); 

Spero che questo vi aiuterà qualcuno!

Answer 2

errorElement: 'none' ha funzionato per me.