html5 form checkValidity() method not found
HtmlFormsCheckvalidityHtml Problem Overview
I am trying to use the form method checkValidity().
http://html5test.com/ tells me that my browser (Chrome) support the form-level checkValidity method.
However, using jsfiddle http://jsfiddle.net/LcgnQ/2/ I have tried the following html and javascript snippets:
<form id="profileform" name="profileform">
<input type="text" id="firstname" required>
<input type="button" id="testbutton" value="Test">
</form>
$('#testbutton').bind('click',function(){
try{
alert($('#profileform').checkValidity());
}
catch(err){alert('err='+err)};
});
I'm getting an error: object has no method checkValidity()
What am I doing wrong?
Html Solutions
Solution 1 - Html
Try:
$('#profileform')[0].checkValidity()
When you select $('#profileform')
you get a jQuery object array. To access actual DOM properties you must select the first item in the array, which is the raw DOM element.
Solution 2 - Html
@robertc 's Answer is perfect. Anyway I'd just add another way to do it using jQuery's .get([index])
function. It also retrieves the DOM element for the given index, or all of the matched DOM elements if there's no index declared.
In the end it is exactly the same, only written in a bit more verbose way:
$('#profileform').get(0).checkValidity()
Leaving you the docs right here: https://api.jquery.com/get/