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>