javascript - a way to check validity of HTML5 forms?

Question

Is it possible to check if an input element of an html5 form is valid based on the pattern I set for it? I know the psuedo class stuff.. but i'm hoping something like: document.getElementById('petitionName').valid can return true or false..

I really hope I don't need to create javascript to re-verify this stuff.

Answer 1

there are two ways to check the validity.

1. inputElement.checkValidity() returns true or false
2. inputElement.validity returns the validity-state object. inputElement.validity.valid returns true/false

Instead of using keyup, you can also use the 'input' event. All browser, which have implemented the constraint validation API, have also implemented the input-event.

If you are using option 1 above, Opera has a bug here and will show its validation hint. So you should use 2.

I have created a html5 forms library, which implements all unknown features to incapable browsers + fixes issues in HTML5 browsers. So everything works like defined in the spec, but it's built on top of jQuery. (http://afarkas.github.com/webshim/demos/index.html).