我正在使用以下代码验证每个部分的输入，因为我正在创建一个完整的页面表单，需要在单击之前进行验证，然后才能转到下一部分，这是我的代码：
function isSectionValid(){
var $section = $('.section.active').find('input');
var allValid = true;
if($section.valid()){
return allValid;
};
};
它在我的if语句
中工作正常if(isSectionValid()){
scrollPage(next, null, false);
setTimeout(hideUp, 200);
setTimeout(hideBottom, 200);
animForm();
}
验证码：
$(function() {
//Add Error divs
function addErrordivs() {
var $inputs = $('input');
$inputs.each(function(){
var name = $(this).attr('name');
$(this).before('<div id="' + name + 'error"></div>');
});
};
window.onload = addErrordivs();
//Validate form
$("#ampform").validate({
errorPlacement: function(error, element) {
//Custom error placement
var name = $(element).attr('name');
var errorname = 'div#' + name + 'error';
$(errorname).html(error);
},
submitHandler: function(form) {
window.location = "http://meow.com";
},
rules: {
"site": {
required: true,
minlength: 5
},
"personalsiteurl": {
required: false,
url: true
},
"blogurl": {
required: false,
url: true
},
"name": {
required: true,
minlength: 2
},
"email": {
required: true,
email: true
},
"password": {
required: true,
minlength: 10
},
"headerimage": {
required: true
},
"header1": {
required: true,
minlength: 2
},
"header2": {
required: true,
minlength: 2
},
"headerfont": {
required: true
},
"menucolor": {
required: true
},
"menufontcolor": {
required: true
},
"menufont": {
required: true
},
"backgroundcolor": {
required: true
},
"sitefontcolor": {
required: true
},
"sitefont": {
required: true
},
"galleryimages": {
required: true
},
},
messages: {
"site": {
required: "Please enter your new AMP ⚡ website's name ",
minlength: "Your new AMP ⚡ website's name must be at least 5 characters long "
},
"personalsiteurl": {
required: "Please enter your personal website's name if you have one "
},
"blogurl": {
required: "Please enter your blog's name if you have one "
},
"name": {
required: "Please enter your Name ",
minlength : "Your name must be at least 2 characters long "
},
"email": {
required: "Please enter your email address "
},
"password": {
required: "Please enter a strong password ",
minlength: "Password must be at least 10 characters "
},
"headerimage":{
required: "Please upload your header image "
},
"header1":{
required: "Please choose your primary header ",
minlength: "Please enter at least 2 characters "
},
"header2":{
required: "Please choose your secondary header ",
minlength: "Please enter at least 2 characters "
},
"headerfont":{
required: "Please choose a header font "
},
"menucolor":{
required: "Please choose your menu background color "
},
"menufontcolor":{
required: "Please choose your menu font color "
},
"menufont":{
required: "Please choose your menu font "
},
"backgroundcolor":{
required: "Please choose your website background color "
},
"sitefontcolor":{
required: "Please choose your website font color "
},
"sitefont":{
required: "Please choose your website font "
},
"galleryimages":{
required: "Please upload your gallery images "
}
}
});
});
/*
//Override default validator messages
$.extend($.validator.messages, {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a fucking valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
minlength: jQuery.validator.format("Please enter at least {0} characters."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});
*/
HTML：
<form id="ampform" class="form form-full" autocomplete="off">
<div class="section active" id="section1">
<li>
<label class="field-label" for="site">New AMP ⚡ Website Name</label>
<input id="site" name="site" type="text" placeholder="rickandmorty"/>
<span class="titties anim-lower">.titties.com</span>
</li>
<li>
<label class="field-label" for="personalsiteurl">Personal Website</label>
<input id="personalsiteurl" name="personalsiteurl" type="text" placeholder="http://www.mywebsite.com"/>
</li>
<li>
<label class="field-label" for="blogurl">Blog</label>
<input id="blogurl" name="blogurl" type="text" placeholder="http://blog.mywebsite.com"/>
</li>
</div>
<div class="section" id="section2">
<li>
<label class="field-label" for="name">Full Name</label>
<input id="name" name="name" type="text" placeholder="Meow Meowington"/>
</li>
<li>
<label class="field-label" for="email">Email Address</label>
<input id="email" name="email" type="email" placeholder="trump@ilovedix.com"/>
</li>
<li>
<label class="field-label" for="password">Password</label>
<input id="password" name="password" type="password" placeholder="********************"/>
</li>
</div>
<div class="section" id="section3">
<li>
<label class="field-label" for="headerimage">Upload Header Image</label>
<input id="headerimage" name="headerimage" type="text" placeholder="Upload Header Image"/>
</li>
<li>
<label class="field-label" for="header1">Primary Header Text</label>
<input id="header1" name="header1" type="text" placeholder="My Amazing Website"/>
</li>
<li>
<label class="field-label" for="header2">Secondary Header Text</label>
<input id="header2" name="header2" type="text" placeholder="Photography Pro"/>
</li>
<li>
<label class="field-label" for="headerfont">Choose a Header Font</label>
<input id="headerfont" name="headerfont" type="text" placeholder="Fontly"/>
</li>
</div>
<div class="section" id="section4">
<li>
<label class="field-label" for="menucolor">Pick a Menu Background Color</label>
<input id="menucolor" name="menucolor" type="text" placeholder="As Black as my Soul"/>
</li>
<li>
<label class="field-label" for="menufontcolor">Pick a Menu Font Color</label>
<input id="menufontcolor" name="menufontcolor" type="text" placeholder="As Red as your Blood"/>
</li>
<li>
<label class="field-label" for="menufont">Pick a Menu Font</label>
<input id="menufont" name="menufont" type="text" placeholder="As Green as Envy"/>
</li>
</div>
<div class="section" id="section5">
<li>
<label class="field-label" for="backgroundcolor">Pick a Website Background Color</label>
<input id="backgroundcolor" name="backgroundcolor" type="text" placeholder="As Blue as Your Balls"/>
</li>
<li>
<label class="field-label" for="sitefontcolor">Pick a Website Font Color</label>
<input id="sitefontcolor" name="sitefontcolor" type="text" placeholder="As Orange as Trump"/>
</li>
<li>
<label class="field-label" for="sitefont">Pick a Website Font</label>
<input id="sitefont" name="sitefont" type="text" placeholder="As Dark as my Humor"/>
</li>
</div>
<div class="section" id="section6">
<li>
<label class="field-label" for="galleryimages">Upload Gallery Images</label>
<input id="galleryimages" name="galleryimages" type="text" placeholder="Upload Gallery Images"/>
</li>
</div>
</form>
即使非必需输入字段为空，如何允许它仍然验证该部分？到目前为止，即使我在required: false的验证规则中将它们设置为url: true，它仍然不允许我继续前进，除非我先填写所有字段以使它们“有效”
基本上，我仍然希望它允许输入验证，如果你留下一个空字段，让你转到下一部分，但如果你决定填写它，它将确保它是一个有效的URL
答案 0 :(得分：0)
关于：
function isSectionValid(){
var $section = $('.section.active').find('input');
var allValid = true;
if($section.valid()){
return allValid;
};
};
在您的代码中，$section表示jQuery对象的集合，它附加到.valid()方法。但是，您不能将多个对象附加到jQuery Validate方法（仅使用第一个匹配元素）。
不可：
$('#myElement').valid(); // single matching element
不好：
$('.myElements').valid(); // collection of matching elements
解决方法是使用jQuery .each()：
$('.myElements').each(function() {
$(this).valid();
});
尝试这样的事情：
function isSectionValid(){
var allValid = true;
$('.section.active input').each(function() {
if (! $(this).valid()) {
allValid = false;
}
});
return allValid;
};
allValid变量以true开头。如果input中的任何单个.section.active元素评估为不有效，则allValid设置为false。检查完所有字段后，将返回allValid。
答案 1 :(得分：0)
我能够找到一个解决方案，使用：not selector并在我希望我的代码忽略的输入中添加一个ignore类，并按以下方式调整我的验证代码：
function isSectionValid(){
var $section = $('.section.active').find('input:not(".ignore")');
var allValid = true;
if($section.valid()){
return allValid;
};
};
然后我只是将ignore类添加到输入中它应该＆＃34;忽略＆＃34;验证：
<li>
<label class="field-label" for="personalsiteurl">Personal Website</label>
<input class="ignore" id="personalsiteurl" name="personalsiteurl" type="text" placeholder="http://www.mywebsite.com"/>
</li>
<li>
<label class="field-label" for="blogurl">Blog</label>
<input class="ignore" id="blogurl" name="blogurl" type="text" placeholder="http://blog.mywebsite.com"/>
</li>