Chrome does not display a set of classes using jQuery or Direct CSS property

Question

This may seem a bit of a design / css issue, but I really need help.

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

It works on all browsers you can imagine except chrome.

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

Does anyone have any idea?

Answer 1

So ... the answer is that none of your JS code works because Chrome uses HTML5 input elements, including form validation. So, if you do not fill in the fields correctly, your verification code will never work!

In HTML5, the required attribute is a boolean, either true or false. According to the specification, the browser should fire an invalid event in the problem field. If you want, you can override the default locking behavior at this point. However, your script breaks again where you try attr('required') . It will return true or false in Chrome using HTML5, and not a value like email , as you expect.

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

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

And then the code refactor from

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

be

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

And change the switch statement to match if necessary

One of the latest ideas . You can also take a really cool approach (aka Feature Detection) and do this instead:

Wrap the inside of the current validate: function as follows:

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

Answer 2

Your CSS file has a non -background-color option. It sets "* background-color". Maybe something like IE hack, but you need to set the property "real" style ("background-color", without an asterisk).