2010-09-24 30 views
8

jQuery.validate no parece cambiar el color de fondo del elemento no válido de forma predeterminada. ¿También es posible cambiar el color de fondo de un elemento select? La mayoría de mis elementos son input type="text", pero necesito un indicador para los elementos de formulario seleccionados. Estoy no usando los mensajes generados por defecto, ya que no se ajustan a mi diseño.jQuery validar el cambio de color del fondo del elemento

El código siguiente hace cambiar el color de fondo de las input elementos, pero nunca vuelve a su anterior estilo:

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

Editar (muestra)

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

Cuando el El elemento input recibe la clase de error jqInvalid por error.

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

CSS screenshot in Chrome

Respuesta

6

Los elementos no válidos reciben una clase de errorby default, o en su caso jqInvalid ya que ha establecido la opción errorClass, solo estilo que clase como usted quiere en la hoja de estilo, por ejemplo:

.jqInvalid { background: #ffdddd; } 

Puede anular los detalles de los mensajes de error (siendo el elemento predeterminado <label>) si desea:

label.jqInvalid { background: none; } 

Este enfoque CSS se encarga de la eliminación ... ya que se elimina la clase una vez que es válida. También hay una clase success si desea que se aplique un fondo verde a los elementos válidos, etc.

+0

Quité las opciones errorClass y errorPlacement, y noto el '.error' clase que se añade a los elementos. Pero, mi CSS no anula. En Firebug, el CSS está allí (debajo del CSS activo), pero está tachado. –

+0

@David - Debe haber algún otro estilo con las mismas propiedades que lo anula ... algo con más especificidad, ¿qué regla está teniendo realmente un efecto, con la misma propiedad tachada para su clase '.error'? –

+0

Es una regla de clase '.field .txt' donde' .field' es un div que rodea el cuadro y '.txt' se aplica directamente. Pensé que los estilos .txt y .jqInvalid (o error) se aplicarían si el atributo de clase es 'class =" txt jqInvalid "' ?? –

2

Esto era un problema de especificidad. .error y .jqInvalid son tanto menos específico que .field .txt

Por lo tanto, el aumento de la especificidad requiere cambiar la CSS para .field input.error, que tiene más peso que .field .txt lo que el orden ya no importaba.

Ver here para obtener información sobre la especificidad

Cuestiones relacionadas