Chrome no muestra Clase establecida por jQuery o una propiedad de Direct CSS

Question

Esto podría parecer una pregunta de diseño/CSS, pero realmente necesito ayuda.

Esta es la página http://library.permilia.com/Gavin/version2.0_beta/lead.html

funciona en todos los navegadores excepto imaginables cromo.

Por que funciona quiero decir que aplica una clase .error que establece los bordes en 1px sólido # f00 que es un borde rojo. ¡En Chrome por alguna razón no puedes cambiarlo sin importar qué!

¿Alguien tiene alguna idea?

Answer 1

Así que ... la respuesta es que ninguno de los códigos JS se activa nunca, porque Chrome está implementando elementos de entrada HTML5, incluida la validación de formularios. Por lo tanto, a menos que complete correctamente los campos, su código de validación ¡nunca se activará!

En HTML5, el atributo required es un booleano, es verdadero o falso. De acuerdo con the spec, el navegador debe activar un evento invalid en el campo del problema. Puede cancelar el comportamiento de bloqueo predeterminado en ese punto si lo desea. Sin embargo, su secuencia de comandos se rompe de nuevo donde intenta attr('required'). Devolverá true o false en Chrome, utilizando HTML5, no un valor como email como esperaba.

Así que hay que añadir estas dos piezas si quieres que esto funcione:

$(":input").bind("invalid", function(e){ 
    e.preventDefault(); // Don't block the form submit 
}); 

y luego re-factor de su código de

var a = $(this).attr('required'); 

sea

var a = $(this).attr('required') ? $(this).attr('type') : ""; 

Y cambie su declaración de interruptor para que coincida si es necesario

Una última idea: También puede tomar un enfoque muy fresco (también conocida como función de detección), y hacer esto en su lugar:

Wrap el interior de su función actual validate: con esto:

if(typeof $('<input />')[0].checkValidity === "undefined") { 
    ... existing code .. 
} else { 
    $(':input').bind('invalid', function(){ 
    $(this).addClass('error'); 
    }).blur(function(){ 
    // If valid, turn off error 
    // If invalid, turn on error 
    $(this).toggleClass('error', !this.checkValidity()); 
    }); 
} 

Here is a demo de la segunda versión que funcionará en Chrome y posiblemente una versión actual/beta de Opera.

Answer 2

Su archivo CSS es no configuración "color de fondo". Está configurando "* background-color". Es probable que sea de algún tipo si IE piratea, pero necesita establecer la propiedad de estilo "real" ("color de fondo", sin asterisco).