a way to check validity of HTML5 forms?
JavascriptFormsHtmlDomJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
there are two ways to check the validity.
inputElement.checkValidity()
returnstrue
orfalse
inputElement.validity
returns the validity-state object.inputElement.validity.valid
returnstrue/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).
Solution 2 - Javascript
You can use the pattern
attribute.
It will validate it client side, so no need to validate it again client side.
But, make sure you do it again server side.
Also note, because browser compatibility is quite poor right now, JavaScript is the norm for validating client side.
Solution 3 - Javascript
To complement, you can check each element was invalid and, for example, set a focus in the first invalid element, by this code:
var Form = document.getElementById('FormID');
if (Form.checkValidity() == false) {
var list = Form.querySelectorAll(':invalid');
for (var item of list) {
item.focus();
}
}