如何驗證以便至少需要1個字段，當第二個字段有兩個必填字段時

Question

對於令人困惑的問題標題表示歉意。我明白如何使用required_from_group方法來確保從一個組中填寫至少一個字段。我不喜歡這樣：

例HTML

<form> 
    <select name="ProductID" id="ProductID" class="js-product"> 
    <option value="1">Bounty</option> 
    <option value="2">Snickers</option> 
    </select> 
    <input type="text" name="ProductName" id="ProductName" class="js-product" /> 
    <select name="Country" id="Country"> 
    <option value="US">United States</option> 
    <option value="CA">Canada</option> 
    <option value="UK">United Kingdom</option> 
    </select> 
</form> 

下面是示例JQuery驗證，以確保用戶從下拉菜單中選擇一個ProductID，或者它們在文本字段ProductName產品名稱鍵入。它是這樣做的，因爲.js-product的類適用於這兩個輸入以將其定義爲一個組。

$('form').validate({ 
... 
rules: { 
     ProductID: { 
       require_from_group: [1, ".js-product"] 
     }, 
     ProductName: { 
       require_from_group: [1, ".js-product"] 
     } 
}); 

我遇到的問題是，如果用戶鍵入產品名稱，他還需要指定該產品的國家。從產品名稱中

如果手動產品名稱的用戶類型，那麼他們也必須選擇列表或類型選擇產品無論是在產品ID

1. 填充：所以我實際需要的用戶從那裏該產品從

起源如何確保ProductName和'Country'是隻需要一組中的下拉列表中選擇國家時ProductID下拉是左NULL？

我想到的一個可能的想法是在ProductName字段中發生blur事件時需要Country下拉菜單。有沒有更好的辦法？

Answer 1

您可以使用the depends property以及the :filled selector來使Country字段僅在填寫ProductName字段時才需要。它不會影響您的require_from_group方法。

$(document).ready(function() { 
 

 
    $('form').validate({ 
 
     // .... 
 
     rules: { 
 
      ProductID: { 
 
       require_from_group: [1, ".js-product"] 
 
      }, 
 
      ProductName: { 
 
       require_from_group: [1, ".js-product"] 
 
      }, 
 
      Country: { 
 
       required: { 
 
        depends: function (element) { 
 
         // sets this rule to 'true' only when the condition is met 
 
         return $("#ProductName").is(":filled"); 
 
        } 
 
       } 
 
      } 
 
     }, 
 
     // only for DEMO - simulated submission 
 
     submitHandler: function(form) { 
 
      alert('form submitted'); 
 
      return false; 
 
     } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.js"></script> 
 

 
<form> 
 
    <select name="ProductID" id="ProductID" class="js-product"> 
 
     <option value="">select...</option> 
 
     <option value="1">Bounty</option> 
 
     <option value="2">Snickers</option> 
 
    </select> 
 
    <br/> 
 
    <input type="text" name="ProductName" id="ProductName" class="js-product" /> 
 
    <br/> 
 
    <select name="Country" id="Country"> 
 
     <option value="">select...</option> 
 
     <option value="US">United States</option> 
 
     <option value="CA">Canada</option> 
 
     <option value="UK">United Kingdom</option> 
 
    </select> 
 
    <br/> 
 
    <input type="submit" /> 
 
</form>