HTML5 validation with jQuery?
I have a large registration form that I split into a jquery loop so you only see the small parts and when you click further it is just another "slide".
I would like to include HTML5 validation in the input fields, but I cannot use the submit button on every slide, I only submit it once at the end. Is there a way to validate the input based on the enter button and when everything is ok it just goes to the next slide. When there is an empty field, it should start and not move 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>
source to share
You can use the checkValidity()
form method :
Returns true if all controls subject to constraint validation satisfy their constraints, or false if some of the controls do not satisfy their constraints. Triggers an event named invalid on any control that does not meet its constraints; such controls are considered invalid unless the event is canceled.
Please note that this method is most likely missing in older browsers! So make sure it exists before trying to invoke it.
source to share