Question

我有一个包含2个多选下拉列表的表单，用于列出国家/地区列表....

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

要实现的方案：如果选择了一个下拉列表，那么我希望无论是否选择第二个下拉列表都要提交表单....

我面临的当前问题：即使选择了一个下拉列表，也只有在选择第二个下拉菜单时才提交.form提交

我遇到了验证功能中的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

要实现的方案：如果选择了一个下拉列表，那么无论是否选择了第二个下拉列表，我都希望提交表单。

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

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

您需要删除required类，因为这会强制required规则并覆盖您的depends。在我的情况下，它会添加required规则，这是我们不想要的。
使用rules对象，您必须定位字段name，而不是id。
最后，您可以使用depends方法代替require_from_group，以确保两者中只需要一个select。

DEMO：version using lenses

$('#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

您的代码似乎正在运行，除非我遗漏了某些内容。

＆＃13;

$(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)"
    });
  
  
  
});

＆＃13;

<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>

＆＃13;

如果未选择其他下拉列表，如何验证一个下拉列表，反之亦然？

2 个答案: