我正在为我的一个项目使用 jQuery SmartWizard。我通过似乎正在工作的 jQuery Validation 插件进行了验证。问题是，如果当前步骤的验证失败，我希望 SmartWizard 阻止用户导航到下一步。
下面的代码似乎可以工作，因为我可以看到Form on step X is invalid控制台日志条目，但是return false即使验证明显失败，下面的应该会阻止用户导航到下一步的代码似乎被忽略了。
我也尝试将函数绑定到按钮的click事件sw-btn-next，这是单击以继续下一步的按钮，但这似乎也不起作用。
jQuery 3.2.1 // Bootstrap 3.3.7 // SmartWizard 5.1.1（最新） // jQuery Validation 1.19.3（最新）
jQuery 验证
// set validation rules for entire form
$('#addNewUser').validate({
debug: true,
errorElement: 'span',
errorClass: 'form-text form-error text-red',
focusInvalid: false,
rules: {
'first_name': {
required: true,
minlength: 3
},
'last_name': {
required: true,
minlength: 3,
},
'password': {
required: true,
minlength: 5,
maxlength: 25
},
'password_repeat': {
required: true,
minlength: 5,
maxlength: 25,
equalTo: '#password'
}
},
messages: {
'first_name': 'Please enter a valid first name'
}
});
智能向导
// ###################################
// # jQuery SmartWizard plugin
// ###################################
$('#smartwizard').smartWizard({
selected: 0, // Initial selected step, 0 = first step
theme: 'default' // theme for the wizard, related css need to include for other than default theme
// when changing steps...
}).on("stepContent", function(e, anchorObject, stepIndex, stepDirection) {
// check if current step is Step 5 and enable submit button
$('#newUserSubmit').prop('disabled', stepIndex !== 4);
console.log('Navigated to stepIndex ' + stepIndex + ' moving in stepDirection ' + stepDirection);
// check form validation
var elmForm = $('#form-step-' + stepIndex);
if (stepDirection == 'forward' && elmForm) {
if ($('#addNewUser').valid()) {
console.log('Form on Step ' + stepIndex + ' is valid');
return true;
} else {
console.log('Form on Step ' + stepIndex + ' is invalid');
return false;
}
}
});
// when clicking NEXT button...
$('.sw-btn-next').click(function() {
console.log('Next button clicked.')
});