我在wizard.js文件中为表单提供了jQuery步骤功能
$("#wizard-validate").steps({
headerTag: ".wizard-title",
bodyTag: ".wizard-container",
transitionEffect: "fade",
onStepChanging: function (event, currentIndex, newIndex) {
if (currentIndex > newIndex) {
return true;
}
if (newIndex === 3 && Number($("#age-2").val()) < 18) {
return false;
}
if ((currentIndex === 0)) {
return $(this).parsley();
}
},
onStepChanged: function (event, currentIndex, priorIndex) {
if (currentIndex === 2 && Number($("#age-2").val()) >= 18) {
$("#form-3").steps("next");
}
if (currentIndex === 2 && priorIndex === 3) {
$("#form-3").steps("previous");
}
},
onFinishing: function (event, currentIndex, newIndex) {
return $(this).parsley().validate();
},
onFinished: function () {
alert("submitted!");
}
});
并且它不是验证表单..只是转到下一步。
我的形式是:
<form class="form-horizontal form-bordered" action="" data-parsley-validate id="wizard-validate">
<!-- Wizard Container 1 -->
<span class="response"></span>
<div class="wizard-title">Details</div>
<div class="wizard-container">
<input type="text" name="title" required value="" class="form-control">
<input type="text" name="location" required class="form-control" value="" >
<input type="text" class="form-control" required id="datepicker1" name="startdate" value="" />
<input type="text" class="form-control" required id="time-picker" name="starttime" value="" />
<input type="text" class="form-control" required id="datepicker2" name="enddate" value="" />
<input type="text" class="form-control" required id="time-picker2" name="endtime" value="" />
</div>
<!--/ Wizard Container 1 -->
<!-- Wizard Container 2 -->
<div class="wizard-title">Details 2</div>
<div class="wizard-container"></div>
<!--/ Wizard Container 2 -->
</form>
并没有任何反应..只是进入下一步,仅此而已..已经尝试使用完整属性,例如:data-parsley-required
或data-parsley-required="true"
我按顺序包含的js文件为:1. jquery.js 2. parsley.js 3. jquery.steps.js 4. Wizard.js
我找到了解决方案:
向导功能和香菜检查在哪里return $(this).parsley();
需要更改return $(this).parsley().validate();
并可以正常工作!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句