我正在使用http://vadimg.com/twitter-bootstrap-wizard-example/,到目前为止,非常好。
由于我在此表单中使用了步骤验证,因此我希望阻止用户在不验证步骤的情况下完成这些步骤。这对于向导底部的PREVIOUS和NEXT按钮来说很好,但是顶部的TABS并不是那么频繁。
我知道onTabClick和onTabShow方法,但我不清楚如何检查已完成的步骤或不完整的步骤。
答案 0 :(得分:2)
onTabClick
- 基本上它与onNext
的工作方式相同。它验证当前选项卡的表单字段,一个区别是我正在检查点击标签是上一个还是下一个(通过比较currentIndex
和nextIndex
参数),如果它是之前的,它不验证任何表格领域。同样重要的是不允许从例如1到3步跳,只有1到2,2到3等。(感谢@imjosh)。
$(document).ready(function() {
var $validator = $("#commentForm").validate({
rules: {
emailfield: {
required: true,
email: true,
minlength: 3
},
namefield: {
required: true,
minlength: 3
},
urlfield: {
required: true,
minlength: 3,
url: true
}
}
});
$('#rootwizard').bootstrapWizard({
'tabClass': 'nav nav-pills',
'onNext': function(tab, navigation, index) {
var $valid = $("#commentForm").valid();
if (!$valid) {
$validator.focusInvalid();
return false;
}
},
'onTabClick': function(activeTab, navigation, currentIndex, nextIndex) {
if (nextIndex <= currentIndex) {
return;
}
var $valid = $("#commentForm").valid();
if (!$valid) {
$validator.focusInvalid();
return false;
}
if (nextIndex > currentIndex+1){
return false;
}
}
});
});
答案 1 :(得分:2)
这样做,除非它们有效,否则不允许跳过选项卡,如果你试图跳过,你将最终找到第一个无效选项卡(例如,如果tab1和tab2有效,则tab3无效,然后点击tab4,你最终会在tab3上结束)
https://jsfiddle.net/wr5tv8em/5/
$(document).ready(function() {
var $validator = $("#commentForm").validate({
rules: {
emailfield: {
required: true,
email: true,
minlength: 3
},
namefield: {
required: true,
minlength: 3
},
urlfield: {
required: true,
minlength: 3,
url: true
}
}
});
$('#rootwizard').bootstrapWizard({
'tabClass': 'nav nav-pills',
'onNext': validateTab,
'onTabClick': validateTab
});
function validateTab(tab, navigation, index, nextIndex){
if (nextIndex <= index){
return;
}
var commentForm = $("#commentForm")
var $valid = commentForm.valid();
if(!$valid) {
$validator.focusInvalid();
return false;
}
if (nextIndex > index+1){
for (var i = index+1; i < nextIndex - index + 1; i++){
$('#rootwizard').bootstrapWizard('show', i);
$valid = commentForm.valid();
if(!$valid) {
$validator.focusInvalid();
return false;
}
}
return false;
}
}
});