CODEWITHSUNDEEP
htmlformscheckvalidity
Journeyman
Journeyman

Reputation: 10281

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?

Upvotes: 78

Views: 89537

Answers (3)

Chandrapal Chetan
Chandrapal Chetan

Reputation: 61

Just another way:

// Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByName('profileform');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function (form) {
                form.addEventListener('submit', function (event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    
                }, false);
            });

Upvotes: -1

leopinzon
leopinzon

Reputation: 712

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

Upvotes: 0

robertc
robertc

Reputation: 75777

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.

Upvotes: 188

Related Questions