我刚开始使用javascript插件来验证表单中的数据,因此遇到了问题。目前,第一次验证工作正常,并执行正确的jquery,但表单第二部分的第二次验证会在输入有效数据时重置页面。
这里有一个jsfiddle来演示这个问题:
http://jsfiddle.net/epn63vk3/2/
您也可以在以下位置查看css的完整版本:
http://178.62.85.190/index.html
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$("#buttonToSecondaryDetailsSection").click(function (e) {
$('#primaryDetailsForm').validate({ // initialize the plugin
rules: {
forenameInput: {
required: true,
minlength: 2
},
surnameInput: {
required: true,
minlength: 2
},
emailInput: {
required: true,
email: true
}
}
});
var primaryValid = $('#primaryDetailsForm').valid();
if (primaryValid) {
e.preventDefault();
$("#primaryDetailsForm").slideUp("slow");
$("#secondaryDetailsForm").slideDown("slow");
} else {
}
});
$("#buttonToCommentsSection").click(function (f) {
$('#secondaryDetailsForm').validate({ // initialize the plugin
rules: {
telephoneInput: {
required: true,
minlength: 11,
maxlength: 11
},
genderInput: {
required: true,
},
dobInput: {
required: true,
dateFormat: true
}
}
});
var secondaryValid = $('#secondaryDetailsForm').valid();
if (secondaryValid) {
f.preventDefault();
$("#secondaryDetailsForm").slideUp("slow");
$("#commentsDetailsForm").slideDown("slow");
} else {
}
});
});
表格:
<div id = "sections">
<div id = "titlePanel">
<p id = "sectionTitle">
Step 1: Your primary details
</p>
</div>
<form id = "primaryDetailsForm" method = "POST">
<label for "forenameInput" id = "labels"> First Name </label>
<br>
<input id = "forenameInput" name = "forenameInput" type = "text" class = "input-block-level">
<br>
<label for "surnameInput" id = "label1"> Surname </label>
<br>
<input id = "surnameInput" name = "surnameInput" type = "text" class = "input-block-level">
<br>
<label for "emailInput" id = "label2"> Email Address:</label>
<br>
<input id = "emailInput" name = "emailInput" type = "email" class = "input-block-level">
<br>
<div id = "registrationButtonWrapper">
<button id = "buttonToSecondaryDetailsSection" class = "btn btn-default"> next > </button>
</div>
</form>
</div>
<div id = "Div1">
<div id = "Div2">
<p id = "P1">
Step 2: Additional details
</p>
</div>
<form id = "secondaryDetailsForm" method = "POST">
<label for "telephoneInput" id = "label3"> Telephone Number </label>
<br>
<input id = "telephoneInput" name = "telephoneInput" type = "number" class = "input-block-level">
<br>
<label for "genderInput" id = "label4"> Gender </label>
<br>
<select id = "genderInput" name="genderInput">
<option value="male"> Male </option>
<option value="female"> Female </option>
</select>
<br>
<label for "dateOfBirthInput" id = "label5"> Date Of Birth </label>
<br>
<input id = "dateOfBirthInput" name = "dobInput" type = "date" class = "input-block-level">
<br>
<div id = "Div3">
<button id = "buttonToCommentsSection" class = "btn btn-default" > next > </button>
</div>
</form>
</div>
首先,您要在每次单击时添加验证,您应该首先检查它是否已添加。此外,日期验证似乎失败了。dateFormat
来自哪里?如果您使用date
,它将起作用。