html5 form checkValidity() method not found

HtmlFormsCheckvalidity

Html 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/

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJourneymanView Question on Stackoverflow
Solution 1 - HtmlrobertcView Answer on Stackoverflow
Solution 2 - HtmlleopinzonView Answer on Stackoverflow