HTML5 Validation with jQuery?

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>

show some code , so that any one can help

Ravi Gadag
– Ravi Gadag

2012-03-16 08:54:07 +00:00
Commented Mar 16, 2012 at 8:54 — Ravi Gadag
– Ravi Gadag, Commented Mar 16, 2012 at 8:54

ThiefMaster · Accepted Answer · 2012-03-16 09:04:20Z

3

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.

answered Mar 16, 2012 at 9:04

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pieter Moeyersons Over a year ago

The problem is that it's works fine on Google Chrome, but I'm building an iPad web app so it needs to work on Safari and I don't see other solutions.. any ideas?

Collectives™ on Stack Overflow

HTML5 Validation with jQuery?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related