html5 form checkValidity() method not found

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?

Solution 1:

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.