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

It may look like a design / CSS question but I need some help.

This page is

It works on every browser imaginable except for Chrome

It works because I mean it applies to a class . Terror sets the boundaries on 1px solid # f00 which is the red border, in Chrome, for some reason you can not change it anymore!

Has anyone got any ideas?

So ... the answer is that none of your JS codes ever firing Because it is implementing HTML5 input elements with Chrome format validation. Therefore, as long as you do not fill in the fields correctly, your verification code will never be!

The required attribute in HTML5 is a boolean, its either true or false. Accordingly, the browser must fire a invalid event on the problem area. If you want, you can cancel the default blocking behavior at that point, however, your script gets broken again where you try the attr ('required') . This will return you to true or false in Chrome, using HTML5, as you expect, such as email not.

So if you have to do this work, then you have to add these two pieces:

  $ (": input"). Bind ("invalid", function (e) {e.preventDefault (); / / Do not block form form}};  

and then re-factor your code

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

be

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

And change your switch statement to match if necessary

One last thought : You can also take a very calm approach (aka Feature Detection), and do this instead:

Present your Wrap:

  if (typeof $ ('& lt; input / & amp; gt;'. [0]):  Valid: . Check Validity === "Undefined") {... Existing code ..} and {$ (': Input'). Tie ('invalid', function () {$ (this) .addClass ('error');} ). Blur (function () {// If valid, close the error // If it is invalid, turn on error $ (this). ToggleClass ('Error',! This.checkValidity ());});  

Will work in Chrome and will probably be the current / beta version of Opera.