Check the validity of an HTML5 form that does not contain a submit button

Check the validity of an HTML5 form that does not contain a submit button

by Pritom K Mondal

HTML

<form id='my_form'>
    <input type="text" name="this_name" required title="Name field title" placeholder="Enter Name"/>
    <input type="text" name="roll" required title="Roll field title" placeholder="Enter Roll"/>
    <input type="submit" style="display: none;"/> <input type="button" value="Check"/>
</form>

JavaScript

var form = $("#my_form");
form.find("input[type='button']").click(function() {
    var index = 0, validated = true;
    form.find(":input").each(function() {
        console.log("Checking field: " + $(this).attr("name"));
        if(!form.find(":input")[index++].checkValidity()) {
            validated = false;
            form.find("input[type='submit']").click();          
        }
    });
    if(validated) {
        console.log("Validation success");
    }
});

form.find("input[type='text']").keyup(function() {
    if(!$(this)[0].checkValidity()) {
        form.find("input[type='submit']").click();
    }
});