Chrome not displaying Class set by jQuery or a Direct CSS property

Question

This might seem like a bit of a design/css question but i really need some help.

This is the page http://library.permilia.com/Gavin/version2.0_beta/lead.html

It works on every browsers imaginable except chrome.

By it works i mean it applies a class .error that sets the borders to 1px solid #f00 which is a red border. In chrome for some reason you cannot change it no matter what!

Anybody got any ideas?

Answer 1

Your CSS file is not setting "background-color". It's setting "*background-color". That's probably some sort if IE hack, but you need to set the "real" style property ("background-color", with no asterisk).

Answer 2

So..., the answer is that none of your JS code is ever firing, because Chrome is implementing HTML5 input elements, including form validation. So, unless you correctly fill in the fields, your validation code will never fire!

In HTML5 the required attribute is a boolean, its either true or false. According to the spec, the browser should fire an invalid event on the problem field. You can cancel the default blocking behavior at that point if you want. However, your script breaks down again where you try attr('required'). It will return true or false in Chrome, using HTML5, not a value like email as you expect.

So you need to add these two pieces if you want this to work:

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

And then re-factor your code from

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

to be

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

And change your switch statement to match if needed

One last idea: You could also take a really cool approach (aka Feature Detection), and do this instead:

Wrap the inside of your current validate: function with this:

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 of the second version that will work in Chrome and possibly a current/beta version of Opera.