2
我需要通過驗證來完成多步驟表單。多步按鈕正在工作，我可以提交表單，但表單沒有得到驗證。它僅驗證多步表單中的最後一頁，但我想在每次按「下一步」按鈕之前驗證字段。表單驗證不適用於多步表單
的HTML代碼：
<form name="basicform" id="basicform" method="post"
action="yourpage.html">
<!-- id will be unique, but class name will be same -->
<div id="sf1" class="frm">
<fieldset>
<legend>Step 1 of 3</legend>
<div class="form-group">
<label class="col-lg-2 control-label" for="uname">Your Name:
</label>
<div class="col-lg-6">
<input type="text" placeholder="Your Name" id="uname"
name="uname" class="form-control" autocomplete="off">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<!-- open1 is given in the class that is binded with the
click event -->
<button class="btn btn-primary open1" type="button">Next
<span class="fa fa-arrow-right"></span></button>
</div>
</div>
</fieldset>
</div>
<!-- id will be unique, but class name will be same -->
<div id="sf2" class="frm">
<fieldset>
<legend>Step 2 of 3</legend>
<div class="form-group">
<label class="col-lg-2 control-label" for="uemail">Your
Email: </label>
<div class="col-lg-6">
<input type="text" placeholder="Your Email" id="uemail"
name="uemail" class="form-control" autocomplete="off">
</div>
</div>
<div class="clearfix" style="height: 10px;clear: both;"></div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<!-- back2 unique class name -->
<button class="btn btn-warning back2" type="button"><span
class="fa fa-arrow-left"></span> Back</button>
<!-- open2 unique class name -->
<button class="btn btn-primary open2" type="button">Next
<span class="fa fa-arrow-right"></span></button>
</div>
</div>
</fieldset>
</div>
<!-- id will be unique, but class name will be same -->
<div id="sf3" class="frm">
<fieldset>
<legend>Step 3 of 3</legend>
<div class="form-group">
<label class="col-lg-2 control-label" for="upass1">Password:
</label>
<div class="col-lg-6">
<input type="password" placeholder="Your Password"
id="upass1" name="upass1" class="form-control" autocomplete="off">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="upass1">Confirm
Password: </label>
<div class="col-lg-6">
<input type="password" placeholder="Confirm Password"
id="upass2" name="upass2" class="form-control" autocomplete="off">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<!-- Unique class name -->
<button class="btn btn-warning back3" type="button"><span
class="fa fa-arrow-left"></span> Back</button>
<!-- Unique class name -->
<button class="btn btn-primary open3" type="button">Submit
</button>
<img src="spinner.gif" alt="" id="loader" style="display:
none">
</div>
</div>
</fieldset>
</div>
</form>
的JavaScript/jQuery代碼：
//validation
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
jQuery().ready(function() {
var v = jQuery("#basicform").validate({
rules: {
uname: {
required: true,
minlength: 2,
maxlength: 16
},
uemail: {
required: true,
minlength: 2,
email: true,
maxlength: 100,
},
upass1: {
required: true,
minlength: 6,
maxlength: 15,
},
upass2: {
required: true,
minlength: 6,
equalTo: "#upass1",
}
},
errorElement: "span",
errorClass: "help-inline",
});
});
//navigation
jQuery().ready(function() {
// Binding next button on first step
$(".open1").click(function() {
if (v.form()) {
$(".frm").hide("fast");
$("#sf2").show("slow");
}
});
// Binding next button on second step
$(".open2").click(function() {
if (v.form()) {
$(".frm").hide("fast");
$("#sf3").show("slow");
}
});
// Binding back button on second step
$(".back2").click(function() {
$(".frm").hide("fast");
$("#sf1").show("slow");
});
// Binding back button on third step
$(".back3").click(function() {
$(".frm").hide("fast");
$("#sf2").show("slow");
});
$(".open3").click(function() {
if (v.form()) {
// optional
// used delay form submission for a seccond and show a loader
image
$("#loader").show();
setTimeout(function(){
$("#basicform").html('<h2>Thanks for your time.</h2>');
}, 1000);
// Remove this if you are not using ajax method for submitting
values
return false;
}
});
});
</script>
感謝您的答覆。但驗證仍然無法正常工作。 'v.form（）'似乎有問題。除此之外還有其他選擇嗎？ – coder1456
您是否嘗試運行上述代碼段？它阻止你進入下一步，直到字段填寫正確。 – Woodrow
是的，我試過了你的代碼片段，但是即使所有的字段都輸入了，'下一步'按鈕也不能工作。它僅在'v.form（）'被刪除但是時間驗證不起作用時起作用。是否有任何其他網址可以使之有效？ – coder1456