如果未选择另一个下拉菜单，如何验证一个下拉菜单，反之亦然？

Question

我有一个表单，其中包含 2 个多 select 下拉列表，用于国家列表和站点列表....

我使用 jQuery 验证插件进行表单验证....

要实现的场景：如果一个下拉菜单是 selected 那么我希望无论第二个下拉菜单是否 selected 都提交表单。 ...

我面临的问题的当前情况： 即使一个下拉列表是 selected 表单没有提交..仅当第二个下拉列表是 [=37= 时表单才提交]ed

我在验证函数中遇到了 depends 属性..但它也不起作用....

我正在尝试使用 ID 为 list_country 和 list_site

的 2 个下拉菜单

下面是我的代码：

$('#feed_form').validate({ // initialize the plugin
        rules: {
            list_country: {
                required: {
                    depends: function () { return $('#list_site').val() == null }
                }
            },
            list_site: {
                required: {
                    depends: function () { return $('#list_country').val() == null } 
                }
            },
            list_trend: {
                required: true  
            }
        },
        ignore: ":hidden:not(select)"
    });

表单标记（在 php 中用 YII 框架编写的源代码）

<form name="feed_form" id="feed_form" action="../minUser/DisplayUsers" method="post">       <div class="row">
            <div class="span3"><strong>Country:</strong></div>
            <div class="span3">
                   <select class="required multi_select" multiple="multiple" style="width:100%" onchange="js:$(&quot;#list_country_chzn&quot;).removeClass(&quot;error_container&quot;);" name="list_country[]" id="list_country">
<option value="666666">All</option>
<option value="5">xyz1</option>
<option value="5">xyz2</option>
<option value="5">xyz3</option>
<option value="5">xyz4</option>
<option value="5">xyz5</option>
<option value="5">xyz6</option>
</select>           </div>
        </div>
        <div class="row">
            <div class="span3"><strong>Site:</strong></div>
            <div class="span3">
                   <select class="required multi_select" multiple="multiple" style="width:100%" onchange="js:$(&quot;#list_site_chzn&quot;).removeClass(&quot;error_container&quot;);" name="list_site[]" id="list_site">
<option value="666666">All</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
</select>            </div>
        </div>
        <div class="row">
            <div class="span3"><strong>Trend:</strong></div>
            <div class="span3">
                   <select class="required" style="width:100%" name="list_trend" id="list_trend">
<option value="">--Select Trend--</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>            </div>
        </div>
        <div class="row">
            <div class="span3">
            <div class="row buttons" align="left" style="margin-top:15px;">
                <input name="search_feed_form" class="btn btn-info" onclick="return checkVerifyForm();" type="submit" value="Search" />            </div>
            </div>
        </div>
    </div>
<!--end outermost box widget-->
</form>

Answer 1

scenario to achieve: if one dropdown is selected then I want the form to be submitted irrespective of second dropdown selected or not.

您需要 require_from_group 方法，它是附加方法文件的一部分。当正确分配给两个 select 元素时，此规则将简单地确保至少选择一个。

~~我会构建一个工作演示，但您还没有向我们展示您的任何 HTML。~~

您需要删除 required class，因为这将强制执行 required 规则并覆盖您的 depends。在我的例子中，它添加了 required 规则，这是我们不想要的。
使用 rules 对象，您必须定位字段的 name，而不是 id。
最后，您可以使用 require_from_group 方法来确保两者中只需要一个 select，而不是 depends。

演示：jsfiddle.net/376otgfL/

$('#feed_form').validate({ // initialize the plugin
    rules: {
        'list_country[]': {  // <- NAME, not id
            require_from_group: [1,".multi_select"]
        },
        'list_site[]': {     // <- NAME, not id
            require_from_group: [1,".multi_select"]
        },
        list_trend: {  // <- NAME, not id
            required: true
        }
    },
    ignore: ":hidden:not(select)"
});

Answer 2

您的代码似乎可以正常工作，除非我遗漏了什么。

$(function() {
 
  
  
  $('#mySuperCoolForm').validate({ // initialize the plugin
        rules: {
            list_country: {
                required: {
                    depends: function () { return $('#list_site').val() == null }
                }
            },
            list_site: {
                required: {
                    depends: function () { return $('#list_country').val() == null } 
                }
            },
            list_trend: {
                required: true  
            }
        },
        ignore: ":hidden:not(select)"
    });
  
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<form id="mySuperCoolForm">
  <fieldset>
    <legend>Select some stuff</legend>
    <select name="list_site" id="list_site" multiple="multiple">
                <option>thing 1</option>
                <option>thing 2</option>
                <option>thing 3</option>
                <option>thing 4</option>
                <option>thing 5</option>
            </select>
    <select name="list_country" id="list_country" multiple="multiple">
                <option>thing 1</option>
                <option>thing 2</option>
                <option>thing 3</option>
                <option>thing 4</option>
                <option>thing 5</option>
            </select>
    <input type="submit" />
  </fieldset>
</form>

如果未选择另一个下拉菜单，如何验证一个下拉菜单，反之亦然？

How to validate one dropdown if the other dropdown is not selected and vice versa?

jquery

jquery-validate