多步表单验证[关闭]

Question

I am new to jQuery and I have no idea on how to implement some jQuery validation on a jQuery form I downloaded.

I am using this form: http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar

Server side validation is already done in php but I need jQuery so that the users cannot click on the Next button if they haven't wronte anything on those fields.(same behavious as the required html attribute for input tags)

I've tried all sorts of things by copying and pasting jQuery validation code from other people but without any success. So if anyone could help me out on this issue I would really appreciate it (will buy you a penguin as I am a linux admin =p )

Kind regards, Ciprian

Answer 1

First you'll want to include a Validation Plugin. Here's a really good one.

Then you'll want to add the required tag to all inputs required.

Then when the user clicks the 'Next' buttons, you'll want to validate the form like so.

$('#msform').validate();
if (!$('#msform').valid()) {
    return false;
}

Place the above code right after $(".next").click(function(){ and you'll be set.

I've built a working copy of this code here. The inputs on the first slide are required. Then on the next slide, the first input is required.

Please note that this project requires three JavaScript files:

<script type="text/javascript" src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>