我有一个jquery步骤向导(3个步骤),里面有一个表单。当进入下一步时,我尝试使用valid()方法验证第一步的表单字段(这没问题),但是当我尝试验证第二步时,jquery validate总是返回true。因此它传递到第三步,也就是结束步骤,而不验证第二步。请告诉我怎么做?
我有一个用于验证每个向导步骤的函数。
$(document).ready(function(){
/* Activate the tooltips */
$('[rel="tooltip"]').tooltip();
$('.wizard-card').bootstrapWizard({
'tabClass': 'nav nav-pills',
'nextSelector': '.btn-next',
'previousSelector': '.btn-previous',
onInit : function(tab, navigation, index){
//check number of tabs and fill the entire row
var $total = navigation.find('li').length;
$width = 100/$total;
$display_width = $(document).width();
if($display_width < 600 && $total > 3){
$width = 50;
}
navigation.find('li').css('width',$width + '%');
},
onNext: function(tab, navigation, index){
if(index == 1){
return validateFirstStep();
} else if(index == 2){
return validateSecondStep();
} else if(index == 3){
return validateThirdStep();
} //etc.
},
onTabClick : function(tab, navigation, index){
// Disable the posibility to click on tabs
return false;
},
onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var wizard = navigation.closest('.wizard-card');
// If it's the last tab then hide the last button and show the finish instead
if($current >= $total) {
$(wizard).find('.btn-next').hide();
$(wizard).find('.btn-finish').show();
} else {
$(wizard).find('.btn-next').show();
$(wizard).find('.btn-finish').hide();
}
}
});
// Prepare the preview for profile picture
$("#wizard-picture").change(function(){
readURL(this);
});
$('[data-toggle="wizard-radio"]').click(function(){
wizard = $(this).closest('.wizard-card');
wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
$(this).addClass('active');
$(wizard).find('[type="radio"]').removeAttr('checked');
$(this).find('[type="radio"]').attr('checked','true');
});
$('[data-toggle="wizard-checkbox"]').click(function(){
if( $(this).hasClass('active')){
$(this).removeClass('active');
$(this).find('[type="checkbox"]').removeAttr('checked');
} else {
$(this).addClass('active');
$(this).find('[type="checkbox"]').attr('checked','true');
}
});
$height = $(document).height();
$('.set-full-height').css('height',$height);
});
function validateFirstStep(){
$(".wizard-card form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
}
},
messages: {
firstname: "Please enter your First Name",
lastname: "Please enter your Last Name",
email: "Please enter a valid email address",
}
});
if(!$(".wizard-card form").valid()){
//form is invalid
return false;
}
return true;
}
function validateSecondStep(){
//code here for second step
$(".wizard-card form").validate({
rules: {
matri: "required"
},
messages: {
matri: "Matricule required"
}
});
if(!$(".wizard-card form").valid()){
console.log('invalid');
return false;
}
return true;
}
https://stackoverflow.com/questions/42009777
复制相似问题