Question

为令人困惑的问题标题道歉。我了解如何使用required_from_group方法确保从组中填充至少1个字段。我是这样做的：

示例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 Validate，以确保用户从选择下拉列表中选择ProductID，或者在ProductName文本字段中输入产品名称。这样做是因为将.js-product类应用于这两个输入以将其定义为一个组。

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

我遇到的问题是，如果用户输入产品名称，他还需要指定该产品的国家/地区。所以我实际上需要用户：

通过从列表中选择产品或在产品名称中输入
如果用户手动输入产品名称，那么他们还必须从产品来源的下拉列表中选择国家/地区

如何确保ProductName和'Country'位于仅在ProductID下拉列表为空时才需要的组中？

我想到的一个可能的想法是在Country字段中发生blur事件时需要ProductName下拉列表。还有更好的方法吗？

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>

当第二个字段有两个必填字段时，如何进行验证，以便组中至少需要一个字段

1 个答案: