如何验证以便至少需要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>