即使表单未经过验证，表单也会移动到下一步我希望表单在进入下一步之前得到验证。当我点击提交时它会得到验证，所以只有最后一个字段集得到验证。如何在点击下一步按钮时启用查询验证。
$("#formValidate").validate({
rules: {
user_name: {
required: true,
minlength: 10
},
name: {
required: true,
minlength: 5
},
name1: {
required: true,
minlength: 5
},
name2: {
required: true,
minlength: 5
},
usr_email: {
required: true,
email: true
},
cemail1: {
required: true,
email: true
},
cemail2: {
required: true,
email: true
},
cemail3: {
required: true,
email: true
},
cpassword: {
required: true,
minlength: 5,
equalTo: "#password"
},
web: {
required: true,
url: true
},
crole: "required",
ccomment: {
required: true,
minlength: 15
},
cgender: "required",
cagree: "required",
tel: {
required: true,
minlength: 10,
phone: true
},
cphone1: {
required: true,
minlength: 10,
digits: true
},
cphone2: {
required: true,
minlength: 10,
digits: true
},
cphone3: {
required: true,
minlength: 10,
digits: true
},
fees: "required",
Student_Strength: "required",
faculty_Strength: "required",
},
//For custom messages
messages: {
user_name: {
required: "Please enter a name",
minlength: "Enter at least 10 characters",
digits: false,
},
name: {
required: "<p class='val'>This field is required</p>",
minlength: "<p class='val'>Enter at least 5 characters</p>",
},
name1: {
required: "<p class='val'>This field is required</p>",
minlength: "<p class='val'>Enter at least 5 characters</p>",
},
name2: {
required: "<p class='val'>This field is required</p>",
minlength: "<p class='val'>Enter at least 5 characters</p>",
},
web: "Please enter your website",
tel: "Please enter a valid phone number",
cphone1: "<p class='val'>Please enter a valid phone number</p>",
cphone2: "<p class='val'>Please enter a valid phone number</p>",
cphone3: "<p class='val'>Please enter a valid phone number</p>",
fees: "we think you forget to mention the fees",
Student_Strength: "we think you forget to mention the student strength",
faculty_Strength: "we think you forget to mention the faculty strength",
cemail1: "Please enter a valid email",
cemail1: "<p class='val'>Please enter a valid email</p>",
cemail2: "<p class='val'>Please enter a valid email</p>",
cemail3: "<p class='val'>Please enter a valid email</p>",
},
errorElement: 'div',
errorPlacement: function(error, element) {
var placement = $(element).data('error');
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
});
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50) + "%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale(' + scale + ')'
});
next_fs.css({
'left': left,
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1 - now) * 50) + "%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'left': left
});
previous_fs.css({
'transform': 'scale(' + scale + ')',
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function() {
return false;
})
$(document).ready(function() {
var current = 1;
widget = $(".step");
btnnext = $(".next");
btnback = $(".previous");
btnsubmit = $(".submit");
// next button click action
btnnext.click(function() {
if (current > 1) {
current = current - 2;
if (current < widget.length) {
$('.basic').validate;
widget.not(':eq(' + (current++) + ')').hide();
setProgress(current);
}
}
hideButtons(current);
})
// Back button click action
btnback.click(function() {
if (current > 1) {
current = current - 2;
if (current < widget.length) {
widget.show();
widget.not(':eq(' + (current++) + ')').hide();
setProgress(current);
}
}
hideButtons(current);
})
// Submit button click
btnsubmit.click(function() {
alert("Submit button clicked");
});
$('.form').validate({ // initialize plugin
ignore: ":not(:visible)",
rules: {
name: "required"
},
});
});
// Hide buttons according to the current step
hideButtons = function(current) {
var limit = parseInt(widget.length);
$(".action").hide();
if (current < limit) btnnext.show();
if (current > 1) btnback.show();
if (current == limit) {
btnnext.hide();
btnsubmit.show();
}
}/* form */
#formValidate {
margin: 50px auto;
position: relative;
height: 130%;
}
#formValidate fieldset {
background: white;
border: 0 none;
border-radius: 3px;
padding: 20px 30px;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: absolute;
}
/*Hide all except first fieldset*/
#formValidate fieldset:not(:first-of-type) {
display: none;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: #333;
text-transform: uppercase;
font-size: 9px;
width: 25%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: #056eba;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
/*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps*/
#progressbar li.active:before,
#progressbar li.active:after {
background: #056eba;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="materialize/js/jquery.validate.js"></script>
<script type="text/javascript" src="materialize/js/additional-methods.js"></script>
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
<form class="col s12 formValidate" id="formValidate" method="post" action="register.php" name="regForm">
<!-- progressbar -->
<ul id="progressbar">
<li class="active step">Basic Information</li>
<li class="step">Additional Information</li>
<li class="step">Details</li>
<li class="step">Additional Contact Information</li>
</ul>
<!-- fieldsets -->
<fieldset class="basic">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">business</i>
<input id="full_name" type="text" length="150" name="user_name" data-error=".errorTxt1">
<label for="full_name" data-success="Perfect!">Please Let us know your name*</label>
<div class="errorTxt1 right"></div>
</div>
</div>
<input type="button" name="next" class="butt next action-button right" value="Next" />
</fieldset>
<fieldset id="inc">
<div class="row">
<div class="input-field col s12">
<select name="course" data-error=".errorTxt7" multiple>
<option value="" disabled selected>Choose your course</option>
<option value="1">Arts</option>
<option value="2">Science</option>
<option value="3">Commerce</option>
</select>
<label>What courses does your university offer*</label>
<div class="errorTxt7 right"></div>
</div>
</div>
<input type="button" name="previous" class="butt previous action-button" value="Previous" />
<input type="button" name="next" class="butt next action-button right" value="Next" />
</fieldset>
<fieldset class="container">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">assignment</i>
<input id="fees" name="fees" type="number" placeholder="10000" step="100" min="100" data-error=".errorTxt8" class="validate" />
<label for="fees">Approximated Academic Fees*</label>
<div class="errorTxt8 right"></div>
</div>
</div>
<input type="button" name="previous" class="butt previous action-button" value="Previous" />
<input type="button" name="next" class="butt next action-button right" value="Next" />
</fieldset>
<fieldset>
<div class="row">
<label>
Please Let us know some additional contact details*
</label>
<table class="highlight">
<th>
Contact details
</th>
<tr>
<td class="responsive-table">Contact Person
<td class="responsive-table">Phone number
<td class="responsive-table">E-mail
</tr>
<tr>
<td>
<input type="text" placeholder="Administrator" length="120" class="validate" data-error=".errorTxt17" name="name" />
<div class="errorTxt17"></div>
<td>
<input type="text" placeholder="Phone number" length="15" name="cphone1" class="validate" data-error=".errorTxt11" />
<div class="errorTxt11"></div>
<td>
<input type="text" placeholder="e-mail" length="80" name="cemail1" class="validate" data-error=".errorTxt12">
<div class="errorTxt12"></div>
</tr>
</table>
</div>
<button class="butt waves-effect waves-light right submit" name="doRegister" type="submit" id="doRegister" value="Register">Submit
<i class="material-icons right">send</i>
</button>
<input type="button" name="previous" class="butt previous action-button left" value="Previous" />
</fieldset>
</form>
</div>
答案 0 :(得分：0)
如果表单已经过验证，您可以调用下一步，如下所示：
$("#myForm").validate({
success: function(label) {
if ($("#myForm").valid()) {
runMyFunction();
}
},
rules: {
//...
}
});