Question

I have a big registration form that I’ve devided with jquery cycle so you only see small parts and when you click next it’s just another “slide”.

I would like to trigger HTML5 validation on the input fields but I can’t use a submit button every “slide”, I only submit it once at the end. Is there a way to validate the inputs based on an input button and when everything is OK it’s just proceeds to the next slide. When there is an empty field it should trigger and not slide forward. Any help?

<form method="post" action="" id="frm">

<div id="modules">

    <div id="module_0">
        <p><input type="text" id="fname" name="fname" placeholder="Enter your first name" required /></p>
        <p><input type="text" id="lname" name="lname" placeholder="Enter your last name" required /></p>
        <p><input type="email" id="email" name="email" placeholder="Enter your e-mail" required /></p>
        <p><input type="button" class="prv" value="Back.."/><input type="button" class="nxt" value="Next.."/></p>
    </div>

    <div id="module_1">Academic
        <p><input type="button" class="prv" value="Back.."/><input type="button" class="nxt" value="Next.."/></p>
    </div>

    <div id="module_2">Professional
        <p><input type="button" class="prv" value="Back.."/><input type="button" class="nxt" value="Next.."/></p>
    </div>

    <div id="module_3">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p><input type="text" id="test" placeholder="TEST" /></p>
        <p><input type="button" class="prv" value="Back.."/><input type="button" class="nxt" value="Next.."/></p>
        <p><input type="submit" id="submit" name="submit" value="Send message"/></p>    </div>          
    </div>

</form>

Answer 1

You can use the checkValidity() method of the form:

Returns true if all controls that are subject to constraint validation satisfy their constraints, or false if some controls do not satisfy their constraints. Fires an event named invalid at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled.

Note that this method is most likely not present in older browsers! So make sure to check if it actually exists before trying to call it.