HTML5 Form Validation Quirks: Opera, Chrome And Firefox

I decided to implement an HTML5 Form validation for one project I was working on recently, and came across several interesting quirks with the implementation across Opera 11.11, Chrome 12 Beta and Firefox 4.0.1.

First off, the basic thing I realized needed to do was check if validation worked at all, so I created my form, slapped on a few “required” attributes on some fields and fired of the form submission. Here is the basic form below along with the HTML and CSS references so we know what we are working with