Custom form validation with HTML5!

I know there are many HTML5 form validation on the web but I made my own test demo so let me share.

The important thing is I wanted to create my own custom validation rule and custom error message.

I have 2 input text fields. Left field value has to be smaller than right field value. (like to-from date if u will)
Then my javascript compare each value and triggers custom validation error.

Note that you must remember to put empty string in setCustomValidity() otherwise after error is thrown, second time input will still cause custom error message to be shown.

For more detail about custom validation, check out: http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-setcustomvalidity

Custom: less: <= more:

Code:

  

Custom: less: <= more: