jQuery convalida il colore di modifica dello sfondo dell'elemento

Question

jQuery.validate non sembra modificare il colore di sfondo dell'elemento non valido per impostazione predefinita. È anche possibile modificare il colore di sfondo di un elemento select? La maggior parte dei miei elementi è input type="text", ma ho bisogno di un indicatore per gli elementi del modulo di selezione. Sono non utilizzando i messaggi predefiniti generati, poiché non si adattano al mio layout.

Il seguente codice di fa cambiare il colore degli input elementi di sfondo, ma non è mai ritorna al suo stile precedente:

 
$('form[name="register"]').validate({ 
     errorClass: 'jqInvalid', 
     rules: { 
      fnameCreate: "required", //input 
      monthCreate: "required", //select 
      emailCreate: { required: true, email: true }, //input 
      passwordCreate: "required", //input type=password 
     }, 
     messages: { 
      fnameCreate: "", 
      monthCreate: "", 
      emailCreate: "", 
      passwordCreate: "", 
     }, 
     errorPlacement: function (error, element) { 
      element.css('background', '#ffdddd'); 
     } 
    }); 

Modifica (campione)

<div class="field"> 
    <div class="labelName_fb"> 
    <label for="email">Email</label> 
    </div> 
    <div class="divforText3"> 
    <div class="divLeft"></div> 
    <div class="textbox-image3"> 
     <input class="txt required" id="emailCreate" name="emailCreate" value="" maxlength="100" type="text" style='width:180px'> 
    </div> 
    <div class="divright"></div> 
    </div> 
</div> 

Qualora il L'elemento input riceve la classe di errore jqInvalid in caso di errore.

CSS

/* line 3 */ .error { background: #ffdddd; } /* I have since removed the errorClass option */ 
/* line 254 */ .field .txt {background:transparent none repeat scroll 0 0;border:medium none;color:#000;font-size:11px;width:130px; margin:5px 0;} 

Answer 1

Gli elementi validi ottenere una classe di errorby default, o nel tuo caso jqInvalid dal momento che hai impostato l'opzione errorClass, proprio stile di quella classe come si vuole nel foglio di stile, ad esempio:

.jqInvalid { background: #ffdddd; } 

È possibile ignorare le specifiche per i messaggi di errore (l'elemento di default essendo <label>) se si desidera:

label.jqInvalid { background: none; } 

approccio Questo CSS si occupa della rimozione ... dal momento che la classe viene rimossa una volta che è valido. Esiste anche una classe success se si desidera uno sfondo verde applicato a elementi validi, ecc.

Answer 2

Questo era un problema di specificità. .error e .jqInvalid sono entrambi a meno specifico rispetto .field .txt

Quindi, aumentando la specificità necessaria modifica del CSS per .field input.error, che ha un peso maggiore rispetto .field .txt modo l'ordine non aveva più importanza.

Vedi here per informazioni sulla specificità