如果選中了一個或多個選項，則需要多個字段jQuery驗證

在我的表單中，根據所需的單選按鈕選項顯示新的字段。我只想驗證這些字段，如果相應的單選按鈕是必需的。如果選中了一個或多個選項，則需要多個字段jQuery驗證

如果選擇了第一個選項，則需要地址，城市，州和郵編。如果選擇第二個選項，則只需要日期如果選擇了第三個選項，則需要以上所有字段。

我已經張貼在這裏的小提琴是我到目前爲止有：http://jsfiddle.net/aEgk8/1/

我想要做的是找出一種方法來編寫規則在需要的字段，如果一個選項或其他檢查。類似於

address: { 
    required: "#ship-address:checked or #ship-both:checked" 
    }, 
    city: { 
    required: "#ship-address:checked or #ship-both:checked" 
    }

我還需要更新選擇的規則，因此只有在選中其中一個選項時才需要它們。我怎樣才能做到這一點？這是我第一次嘗試實現這樣的事情，所以我願意接受建議。

我在使用1.3.2庫（我無法更改或刪除）的網站上實現此功能，並且字段上的顯示/隱藏功能無法正常工作，因此我必須運行更新的圖書館並行。當我僅引用jQuery 1.3.2時，我擁有的顯示/隱藏功能不起作用。

這裏是我的代碼：

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
      <script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js" type="text/javascript"></script> 
      <script type="text/javascript"> 
      jQuery.validator.setDefaults({ 
      debug: true, 
      success: "valid" 
     }); 
      </script>     
      <script>var $j = jQuery.noConflict(true);</script>     
      <script type="text/javascript"> 
      $j(document).ready(function() { 
       $j.validator.addMethod("valueNotEquals", function(value, element, arg){ 
        return arg != value; 
       }, "Please select a new shipping date."); 
       $j('#pancettaForm').change(function() { 
          $j('#address,#address2,#new-ship-date').hide(); 
          if ($j('#ship-address').prop('checked')) { 
           $j('#address, #address2').show(); 
          } 
          else if ($j('#ship-date').prop('checked')) { 
           $j('#new-ship-date').show(); 
          } 
          else if ($j('#ship-both').prop('checked')) { 
           $j('#address, #address2, #new-ship-date').show(); 
          } 
         }); 
         $j("#pancettaForm").validate({ 
           rules: { 
             address: { 
               required: "#ship-address:checked" 
             }, 
             newShip: { 
               valueNotEquals: "- Select -" 
             } 
           }, 
           messages: { 
             updateShip: { 
               required: "Please tell us how you would like to update your order." 
             }, 
             SelectName: { 
               valueNotEquals: "Please select a new shipping date." 
             } 
           } 
         }); 

      }); 


      </script>

和HTML：

 <form name="pancettaForm" method="post" action="http://lizlantz.com/lcform.php" id="pancettaForm"> 
       <input type="hidden" value="Pancetta Order Update" name="subject"> 
       <input type="hidden" value="cookware/partners_10151_-1_20002" name="redirect"> 
       <ul> 
        <li> 
        <label for="updateShip">I'd like to:</label> 
         <input id="ship-address" name="updateShip" type="radio" value="update-ship-address" class="required"/> Have pancetta shipped to a different address than my skillet<br /> 
         <input id="ship-date" name="updateShip" type="radio" value="update-ship-date" class="required" /> Have pancetta shipped sooner than June 14, 2013 <br /> 
         <input id="ship-both" name="updateShip" type="radio" value="update-both" class="required"/> Make changes to both the shipping address and shipping date 
        </li> 
        <li>     
        <label for="order-number"><em>*</em>Order Number (available in order confirmation email):</label> 
         <input type="text" name="order-number" class="required"> 
        </li>    
        <li>     
        <label for="full-name"><em>*</em>Recipient Full Name:</label> 
         <input type="text" name="full-name" class="required"> 
        </li> 
        <li id="address" style="display: none;"> 
         <label for="address"> 
          <em>*</em>Address 
         </label> 
         <input type="text" name="address"> 
         <label for="address2"> 
          Address Line 2 
         </label> 
         <input type="text" name="address2"> 
        </li> 
        <li id="address2" style="display: none;"> 
         <label for="city"> 
          <em>*</em>City 
         </label> 
         <input type="text" name="city"> 
         <label for="state"> 
          <em>*</em>State 
         </label> 
         <select name="state"> 
          <option>- Select State -</option>        
          <option value="AL">Alabama</option> 
          <option value="AK">Alaska</option> 
          <option value="AZ">Arizona</option> 
          <option value="AR">Arkansas</option> 
          <option value="CA">California</option> 
          <option value="CO">Colorado</option> 
          <option value="CT">Connecticut</option> 
          <option value="DE">Delaware</option> 
          <option value="DC">District of Columbia</option> 
          <option value="FL">Florida</option> 
          <option value="GA">Georgia</option> 
          <option value="HI">Hawaii</option> 
          <option value="ID">Idaho</option> 
          <option value="IL">Illinois</option> 
          <option value="IN">Indiana</option> 
          <option value="IA">Iowa</option> 
          <option value="KS">Kansas</option> 
          <option value="KY">Kentucky</option> 
          <option value="LA">Louisiana</option> 
          <option value="ME">Maine</option> 
          <option value="MD">Maryland</option> 
          <option value="MA">Massachusetts</option> 
          <option value="MI">Michigan</option> 
          <option value="MN">Minnesota</option> 
          <option value="MS">Mississippi</option> 
          <option value="MO">Missouri</option> 
          <option value="MT">Montana</option> 
          <option value="NE">Nebraska</option> 
          <option value="NV">Nevada</option> 
          <option value="NH">New Hampshire</option> 
          <option value="NJ">New Jersey</option> 
          <option value="NM">New Mexico</option> 
          <option value="NY">New York</option> 
          <option value="NC">North Carolina</option> 
          <option value="ND">North Dakota</option> 
          <option value="OH">Ohio</option> 
          <option value="OK">Oklahoma</option> 
          <option value="OR">Oregon</option> 
          <option value="PA">Pennsylvania</option> 
          <option value="RI">Rhode Island</option> 
          <option value="SC">South Carolina</option> 
          <option value="SD">South Dakota</option> 
          <option value="TN">Tennessee</option> 
          <option value="TX">Texas</option> 
          <option value="UT">Utah</option> 
          <option value="VT">Vermont</option> 
          <option value="VA">Virginia</option> 
          <option value="WA">Washington</option> 
          <option value="WV">West Virginia</option> 
          <option value="WI">Wisconsin</option> 
          <option value="WY">Wyoming</option> 
         </select> 
         <label for="zip"> 
          <em>*</em>Zip Code 
         </label> 
         <input type="text" name="zip"> 
        </li> 
        <li id="new-ship-date" style="display: none;"> 
         <label for="New Ship Date"><em>*</em>New Ship Date (Saturday-Tuesday delivery not available):</label>     
         <select name="newShip" id="newShip"> 
          <option>- Select -</option> 
          <option value="Wednesday, May 22">Wednesday, May 22</option> 
          <option value="Thursday, May 23">Thursday, May 23</option> 
          <option value="Friday, May 24">Friday, May 24</option> 
          <option value="Wednesday, May 29">Wednesday, May 29</option> 
          <option value="Thursday, May 30">Thursday, May 30</option> 
          <option value="Friday, May 31">Friday, May 31</option> 
          <option value="Wednesday, June 5">Wednesday, June 5</option> 
          <option value="Thursday, June 6">Thursday, June 6</option> 
          <option value="Friday, June 8">Friday, June 8</option> 
          <option value="Wednesday, June 12">Wednesday, June 12</option> 
          <option value="Thursday, June 13">Thursday, June 13</option> 
          <option value="Friday, June 14">Friday, June 14 </option> 
          <option value="Wednesday, June 19">Wednesday, June 19</option> 
          <option value="Thursday, June 20">Thursday, June 20</option> 
          <option value="Friday, June 21">Friday, June 21</option> 
         </select>        
        </li>      
        <li> 
         <label for="phone"> 
          <em>*</em>Phone (for delivery questions) 
         </label> 
         <input type="text" name="phone" class="required"> 
        </li>    
       </ul> 
         <input type="submit" id="button" name="submit" value="Update Pancetta"> 

       </form>

來源

2013-05-02 surfbird0713

爲你所做的答案的工作？ – Fabi 2013-05-08 16:57:42

address: { 
    required: { 
    depends: function(element) { 
     return $('#ship-address').is(':checked') || $('#ship-both').is(':checked'); 
    } 
    } 
}, 
city: { 
    required: { 
    depends: function(element) { 
     return $('#ship-address').is(':checked') || $('#ship-both').is(':checked'); 
    } 
    } 
}

http://jsfiddle.net/aEgk8/4/

至於選擇，我不知道你是指哪些，但基於依賴關係的想法是相同的。

來源

2013-05-02 20:15:40 Fabi

我認爲這可能是你正在尋找（雖然我沒有在你的jQuery的版本測試了這個）的選項：http://jqueryvalidation.org/category/methods/#example:-makes-details-required-only-if-#other-is-checked

從jquery.validation文檔：

例如：使僅當檢查#other時才需要詳細信息。

<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Makes details required only if #other is checked.</title> 
    <link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css"> 
</head> 
<body> 
    <form id="myform"> 
     <label for="other">Check to make next field required</label> 
     <input id="other" type="checkbox"> 
     <br> 
     <input id="details" name="details"> 
     <br> 
     <input type="submit" value="Validate!"> 
    </form> 

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script> 
    <script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script> 

    <script> 

    // just for the demos, avoids form submit 
    jQuery.validator.setDefaults({ 
     debug: true, 
     success: "valid" 
    }); 

    $("#myform").validate({ 
     rules: { 
      details: { 
       required: "#other:checked" 
      } 
     } 
    }); 
    </script> 
</body> 
</html>

該解決方案，而重複的，如果你有很多領域，仍然是比使用上述方法depends清潔。

來源

2014-10-22 03:43:42 gillytech

我認爲只是增加了,將幫助：

address: { 
required: "#ship-address:checked, #ship-both:checked" 
}, 
city: { 
required: "#ship-address:checked, #ship-both:checked" 
}

來源

2017-05-27 12:14:46

如果選中了一個或多個選項，則需要多個字段jQuery驗證

回答

相關問題