我使用bootstrap向导制作多步表单 为了验证,我使用了Parsley 问题是(当我点击下一个按钮进入第二次点击,验证工作,如果验证返回true,我去。如果没有,我必须更正错误然后我去第二个选项卡, 但是这个过程不适用于其他下一次点击移动到第三个和其他选项卡,如果我点击下一步,我将移动到选项卡而不进行验证检查!
java脚本代码
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
'onNext': function(tab, navigation, index) {
var form = jQuery('#demo-form');
form.parsley().validate({group: 'tab'+index});
if (form.parsley().isValid({group: 'tab'+index})){
window.alert(index);
return true;
} else {
return false;
}
},
onPrevious: function(tab, navigation, index) {
return true;
},
onTabShow: function(tab, navigation, index) {
console.log("show : " + index);
}
});
});
和HTML代码:
<div class="tab-pane" id="tab1">
<form id="demo-form" data-parsley-validate action="{{route('test')}}" method="post">
{{ csrf_field() }}
<input type="email" class="form-control form-control-lg " data-parsley-trigger="change" placeholder="col-form-label-lg" name="email" required="" data-parsley-type="email" data-parsley-group="tab1">
<input type="text" class="form-control form-control-lg " placeholder="col-form-label-lg" name="mailbox" required="" data-parsley-group="tab5">
</div>
<div class="tab-pane" id="tab2">
<input type="text" class="form-control form-control-lg " placeholder="col-form-label-lg" name="projName" required="" data-parsley-group="tab2">
</div>
<div class="tab-pane" id="tab3">
<button type="submit" id="sub-button" onclick="submitForms()">
submit
</button>
</form>
</div>