我到处搜索但似乎无法找到解决方案。我正在尝试创建一个表单，其中有3个字段集，一次只能看到一个字段集。我有onkeyup验证工作，如下所示：
$("#contactInfoForm").validate({
debug:true,
onkeyup: false,
rules: {
firstName: {
required: true,
loginRegex: true,
minlength: 2
},
lastName: {
required: true,
minlength: 2
},
Email:{
required: true,
email: true
},
Email_confirm:{
required: true,
email: true,
equalTo: "#Email"
},
streetAddressBilling:{
required: true,
minlength: 3
},
billingCity:{
required: true,
digits: true,
minlength: 3
},
state:{
required: true
},
zip:{
required: true,
digits: true,
minlength: 3
},
phone:{
required: true,
digits: true,
minlength: 3,
phoneUS: true,
},
prefix:{
required: true,
digits: true,
minlength: 3
},
landline:{
required: true,
digits: true,
minlength: 4
}
},//end of rules
groups: {
DateofBirth: "phone prefix landline"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "phone" || element.attr("name") == "prefix" || element.attr("name") == "landline")
error.insertAfter("#landline");
else
error.insertAfter(element);
},
messages:{
firstName: {
required: "Please enter first name",
lettersonly: "No numbers please",
loginRegex: "Login format not valid",
minlength: "Use at least 2 letters"
},
lastName: {
required: "Please enter last name",
lettersonly: "No numbers please",
minlength: "Use at least 2 letters"
},
Email: {
required: "Please enter your email",
email: "Please enter a valid email address"
},
Email_confirm: {
required: "Please enter your email",
email: "Please enter a valid email address",
equalTo: "Email addresses do not match"
},
streetAddressBilling:{
required: "Please enter your street address",
minlength: "Use at least 3 letters"
},
billingCity:{
required: "Please enter your city",
minlength: "Use at least 3 letters"
},
state:{
required: "Please select your state."
},
zip:{
required: "Please enter your zip code",
digits: "Please only use numbers",
minlength: "Use at least 5 letters"
},
phone:{
required: "Please enter your phone number",
digits: "Please only use numbers",
minlength: "Use 3 numbers"
},
prefix:{
required: "Please enter your phone number",
digits: "Please only use numbers",
minlength: "Use 3 numbers"
},
landline:{
required: "Please enter your phone number",
digits: "Please only use numbers",
minlength: "Use 4 numbers"
}
}//end of messages
});//end of contact info form validation rules
我要做的下一件事是在每个字段集的末尾都有一个继续按钮。该按钮应该检查该字段集中的表单以及它们是否经过验证，然后打开下一个字段集。下面是字段集的HTML：
<form onsubmit="return submitForm(this)" method="post" id="contactInfoForm" name="contactInfoForm" action="#">
<fieldset>
<legend class="accessible-text">Address</legend>
<ol>
<li class="fullInput">
<label id="caption_address1" for="address1">
Address
</label>
<input type="text" autocomplete="off" aria-required="true" placeholder="Street Address" class="fullInput" maxlength="30" id="address1" name="address1">
</li>
<li class="no-label fullInput">
<label class="accessible-text" id="caption_address2" for="address2">
Billing Address Line 2
</label>
<input type="text" maxlength="40" autocomplete="off" aria-required="false" placeholder="Street Address Line 2(Optional)" class="fullInput" id="address2" name="address2">
</li>
<li class="no-label">
<label class="accessible-text" id="caption_city" for="city">
City
</label>
<input type="text" aria-required="true" placeholder="City" maxlength="30" id="city" name="city">
</li>
<li class="no-label">
<label class="accessible-text" id="caption_state" for="state">
State
</label>
<select aria-required="true" class="required" name="state" id="state">
<option value="">State</option>
</select>
</li>
<li class="no-label">
<label class="accessible-text" id="caption_zipCode" for="zipCode">
ZIP
</label>
<input type="text" autocomplete="off" aria-required="true" placeholder="20151" name="zipCode" id="zipCode" maxlength="5">
</li>
<li>
<label class="fullInput" id="caption_phone" for="phone">
Main Contact Number <a href="">Why we need this</a><br>
<span class="accessible-text">Please enter your area code</span>
</label>
<input type="text" autocomplete="off" aria-required="true" placeholder="703" name="phone" id="phone" maxlength="3">
<label class="accessible-text" id="caption_prefix" for="prefix">
Enter the next 3 numbers
</label>
<input type="text" autocomplete="off" aria-required="true" placeholder="555" name="prefix" id="prefix" maxlength="3">
<label class="accessible-text" id="caption_landline" for="landline">
Enter the last 4 numbers
</label>
<input type="text" autocomplete="off" aria-required="true" placeholder="5555" name="landline" id="landline" maxlength="4">
</li>
</ol>
</fieldset>
</form>
这是按钮的JS，我使用jquery ui来淡化：
$("#button").on("click", function(event){
if($('#contactInfoForm').validate({
rules: {
firstName: {
required: true,
loginRegex: true,
minlength: 2
},
lastName: {
required: true,
minlength: 2
},
Email:{
required: true,
email: true
},
Email_confirm:{
required: true,
email: true,
equalTo: "#Email"
},
streetAddressBilling:{
required: true,
minlength: 3
},
billingCity:{
required: true,
digits: true,
minlength: 3
},
state:{
required: true
},
zip:{
required: true,
digits: true,
minlength: 3
},
phone:{
required: true,
digits: true,
minlength: 3,
phoneUS: true,
},
prefix:{
required: true,
digits: true,
minlength: 3
},
landline:{
required: true,
digits: true,
minlength: 4
}
},//end of rules
}))
{ //checks if it's valid
if($(this).valid()) {
$('#about_you_ver2').toggleClass("mod");
$('#nameFieldsetEdit').toggleClass("hide");
$('#name').fadeOut('xslow', function(){
//$(this).effect("highlight", {}, 2000);
}),
$('#billing_address').fadeIn('xslow', function(){
//$(this).effect("highlight", {}, 2000);
}),
$('#billing_container p').fadeIn('xslow', function(){
//$(this).effect("highlight", {}, 2000);
})
}//end of valid direction
}
else{
alert("I'm not valid");
}
});//end of onclick for button
当我在单击按钮时没有输入任何信息时，表单会通过验证。我该如何解决这个问题？
答案 0 :(得分：1)
你真的有比我在这里工作更多的代码，但我会指出你的一些错误，并提供一个简单的演示。
关于您的if($('#contactInfoForm').validate(行。 .validate()是插件的初始化，而非调用表单有效性的方法。相反，.validate()应该在DOM ready事件处理程序中被称为一次。然后，一旦初始化，表单将使用其各种内置事件处理程序自动测试。表单也可以使用.valid()方法以编程方式进行测试。
您不需要click处理程序。插件会自动捕获click按钮的submit事件。
关于您的内联onsubmit="return submitForm(this)"代码。 jQuery渲染所有内联JavaScript已过时。不仅如此，当onsubmit插件内置了非常好的.validate()时，使用submitHandler毫无意义。
onkeyup: false将禁用任何实时击键验证。默认情况下，插件将在每次击键时进行验证，因此只需将选项保留在初始化之外即可启用该功能。
以下是我将如何构建带有验证的多步骤表单。
1）将每个<fieldset>放在其自己唯一的<form>代码集中。
2）在每个.validate()上单独初始化<form>。这样，您还可以在其自己的.validate()初始化函数中逻辑地组织每个步骤的规则。
3）在submitHandler的每个实例中使用.validate()回调隐藏成功验证后的特定步骤，然后显示下一个表单。 submitHandler仅在form有效时触发，因此很多条件代码都会过时。
工作演示：http://jsfiddle.net/wqjnn/
<强> HTML ：
<form id="myform1">
<h1>Step 1</h1>
<input type="text" name="field1" />
<input type="submit" value="go to step 2" />
</form>
<form id="myform2">
<h1>Step 2</h1>
<input type="text" name="field2" />
<input type="submit" value="go to step 3" />
</form>
<form id="myform3">
<h1>Step 3</h1>
<input type="text" name="field3" />
<input type="submit" />
</form>
<强>的jQuery ：
$(document).ready(function () {
$('#myform1').validate({
// your rules for step 1 fields,
submitHandler: function (form) {
$(form).hide(function () { // hide this step
$('#myform2').show(); // show step 2
});
return false;
}
});
$('#myform2').validate({
// your rules for step 2 fields,
submitHandler: function (form) {
$(form).hide(function () { // hide this step
$('#myform3').show(); // show step 3
});
return false;
}
});
$('#myform3').validate({
// your rules for step 3 fields,
submitHandler: function (form) {
var data1 = $('#myform1').serialize();
var data2 = $('#myform2').serialize();
var data3 = $(form).serialize();
var data = data1 + "&" + data2 + "&" + data3; // concatenate data from all forms
// alert(data);
// your ajax?
return false; // to block normal form submit if needed
}
});
});