gpt4 book ai didi

javascript - JQuery验证插件: Unable to validate the second setp of bootstrap wizard

转载 作者:行者123 更新时间:2023-12-01 05:22:45 25 4
gpt4 key购买 nike

我有一个 jquery 步骤向导(3 个步骤),其中存在一种形式。当传递到下一步时,我尝试使用 valid() 方法验证第一步表单字段(没问题),但是当我尝试验证第二步时,jquery validate 总是返回 true。因此它传递到第三步并结束步骤而不验证第二步。请问怎么做?

我有 1 个函数用于验证每个向导步骤。

$(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;

}

最佳答案

只需替换掉你的refreshAnimation函数

来自:

function refreshAnimation($wizard, index){
total_steps = $wizard.find('li').length;
move_distance = $wizard.width() / total_steps;
step_width = move_distance;
move_distance *= index;

$wizard.find('.moving-tab').css('width', step_width);
$('.moving-tab').css({
'transform':'translate3d(' + move_distance + 'px, 0, 0)',
'transition': 'all 0.3s ease-out'

});
}

function refreshAnimation($wizard, index){
total_steps = $wizard.find('.nav li').length;
move_distance = $wizard.width() / total_steps;
step_width = move_distance;
move_distance *= index;

$wizard.find('.moving-tab').css('width', step_width);
$('.moving-tab').css({
'transform':'translate3d(' + move_distance + 'px, 0, 0)',
'transition': 'all 0.3s ease-out'

});
}

关于javascript - JQuery验证插件: Unable to validate the second setp of bootstrap wizard,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42009777/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com