Advanced use of built-in constraints and custom validations
So far, we have already used some of the built-in validation mechanisms. Now we are going to take a deeper look at some of them, and how we can add our own customization. We will change the style and apply some more advanced checks as well, when we will see how we can disable validation on certain elements by creating a form that has most of these features.
Note
The current working draft version for the form validation can be found at http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#client-side-form-validation.
How to do it...
We will create a form that will have error messages styled using CSS, and custom validation using HTML and JavaScript as follows:
We will start off by creating the head section, where we will include
example.css
, where the CSS file will contain selectors for theinput
elements with valid, invalid, optional, and required state:<head> <title>Built In Validation</title>...