Recently I wrote an article for A List Apart about Forward thinking form validation and I introduced a script I wrote that emulates some of the new HTML Forms chapter functionality in older browsers, allowing a developer to use all these new features and have it work the same across the board.
In the spirit of giving back to the community I have released it under a dual BSD and MIT license so you can do as you please with it. I’ve setup a github repository so you can fork it, watch it suggest ways to improve it and submit any issues.
This script doesn’t rely on any libraries. It uses feature detection to find out if the browser already supports the constraint validation API and either hooks into the native support or creates methods to emulate it.
How does it work?
Let’s dive into the inner workings of the script and see how some of it works. As discussed in the Forward thinking form validation article the script adds the support for some of the HTML5 forms chapter input types and attributes as well as the constraint validation API.
On page load you run the
H5F.setup() method which accepts two arguments, the second being optional. The first argument can be a
HTMLCollection of form elements or an array of
HTMLFormElements. The second optional argument is an object to setup the class names to be applied to the fields in their different validity states.
The above example passes an array of two
HTMLFormElements. The script will then detect that more than one form is being passed and loop through the array and attach the functionality. The second argument specifies the class names to be applied when a field is valid, invalid or required.
In order to avoid potentially adding hundreds of event listeners we use the event models capturing behaviour and attach it to the parent form. This way when a field triggers an event we want to use, it will start at the window object work its way down the DOM tree and the form will capture it. To work around IE not bubbling blur and focus events we use the focusout and focusin events which do bubble.
The above code is taken from the
H5F.listen() method which inside the IE fork will check if we are using blur or focus and change them to focusout and focusin respectively.
Detecting native support
Opera 9.6, Chrome 4, Firefox 4 and Safari 5 all support the constraints validation API natively so in order to not overwrite any built in functionality we use feature detection.
H5F.support() method will return a boolean value depending on the browsers support level. We check for native support of the
checkValidity() method and the
If the browser doesn’t support the necessary features we add them. Each form will have the
checkValidity() method and we loop through each form control and also add
checkValidity and the form controls
Looping over each form control we check that it isn’t a fieldset (Firefox includes fieldsets in the elements array whereas webkit doesn’t) and that it is required. We only check the existence of the required attribute and not its value since it is a boolean attribute.
In native supporting browsers each form control has the validity attribute that has boolean values to know what state the control is in.
Compare with regular expressions
When a pattern attribute is used we first check the field’s type against a regular expression.
If a fields type is either email or url we want to handle that differently compared to just a normal text input with the pattern attribute.
Knowing what type the form control is we can than fork it to handle emails and url’s by using our predefined regular expressions.
For all other form controls which don’t match any of our predefined types we pass in the pattern attribute value to a regular expression and test the field’s value against that.
Keep a form control within range
H5F also supports a simplified version of min, max and step attributes. It will only support whole numbers and in the demo we use it for a postcode example, although most international postcodes aren’t all numbers like Australia but we’ll use this example just to demonstrate the feature.
The postcode form control has both the min and max attributes set to keep it within two values, 1001 – 8000 in our case. Since min, max and step are all related I created a single method called
H5F.range() to handle it all.
If a form control specifies only the step attribute the
H5F.range() method works around that by using the OR (||) operator to give the variables fallback values so the calculations can still be made. To emulate the step attribute we use modulus (%) which will divide our value by our minimum value, will fallback to 0 if it isn’t specified, and return the remainder.
Using the modulus value we can find out if it is conforming to the specified increment. We make sure the field isn’t empty and that it is actually a number. Then we do a check to make sure it doesn’t equal zero, if it does it will return true which will indicate that there is a step mismatch if false the number is conforming. E.g. If the field has a step value of 3 and the user enters 11 we work out the remainder: (11-0)%3, 3 goes into 11 three times and leaves us with a remainder of 2 which tells us there is a step mismatch.
Since HTML5 is still a working draft there a few difference between browsers and browser version, I’ve listed some of them I’ve come across here:
- In Firefox 4 invalid form controls have a red box-shadow applied to them; this can be reset by setting the box-shadow to none.
- Firefox 4 will override the title tooltip value depending on the validity state of the form control.
- Safari 51, Chrome 4-61 and Opera 9.6+ all block form submission until all form control validation constraints are met.
- Opera 9.6+ upon form submission will focus to the first invalid field and bring up a UI block indicating that it is invalid.
1. Safari 5.0.1, and Chrome 7 have removed form submission blocking if a form is invalid, most likely due to legacy forms now not submitting on older sites.