jQuery验证URL，但仍然通过验证，如果它不是必需的

Question

我使用下面的代码来验证每个部分的输入，因为我创建一个完整的页面表单，并需要点击验证，然后才能移动到下一节是我的代码：

function isSectionValid(){ 
    var $section = $('.section.active').find('input'); 
    var allValid = true; 
    if($section.valid()){ 
     return allValid; 
    }; 
}; 

它工作得很好，我如果语句

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> 

我怎么能允许它仍然验证，即使不要求输入字段为空的部分？到目前为止，尽管我在url: true的验证规则中将它们设置为required: false，但它仍然不允许我前进，除非我先填充所有字段以便它们“有效”

基本上，我仍然希望它允许输入验证，让你传递给下一章节，如果你离开一个空场，但如果你决定要填写，这将确保它是一个有效的URL

Answer 1

关于：

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。如果.section.active内的任何单个input元素评估为而非有效，则allValid设置为false。所有字段被检查后，返回allValid。

Answer 2

我能够通过找到围绕解决工作：没有选择和添加忽略类两种，我想我的代码忽略和调整我的验证码通过以下方式输入：

function isSectionValid(){ 
    var $section = $('.section.active').find('input:not(".ignore")'); 
    var allValid = true; 
    if($section.valid()){ 
     return allValid; 
    }; 
}; 

然后我刚添加的忽略类投入应“忽略”验证为：

<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>