jQuery 验证插件 : how to validate a dropdown

Question

我正在尝试使用 jQuery Validate 插件来验证下拉菜单。它正确地验证了我表单的其余部分。但它不适用于下拉菜单。

这是我的 jQuery:

$('#campaignForm').validate({
    rules: {
         campaign_name: {
             required: true
         },
         html_url: {
             required: {
                 depends: function(element) {
                     return $('#html_url').val() == 'none';
                 }
              }
         }
    },
    messages: {
        campaign_name: 'Please enter a campaign name',
        html_url: 'Please select a template'
    }
});

这是我的 HTML:

<select name="html_url" id="html_url">
<option value="none">Select One...</option>
...
</select>

我做错了什么？我的变量名是否以某种方式发生冲突。事件名称的规则工作正常。

Answer 1

如果你只是想让一个select元素成为required，你不会使用depends:因为它不“依赖”于< em>另一个元素。在您的使用中，depends 属性只是切换 required 规则。这里的问题不是 required 规则......它不需要切换。问题在于，当所有选项都已包含一个值 时，required 规则将不起作用，因为required 将始终得到满足。

只需使用 value="" 作为默认选项，然后像设置任何其他元素一样设置您的规则。

<option value="">Select One...</option>

jsFiddle DEMO

HTML:

<form id="campaignForm">   
    <select name="html_url" id="html_url">  
        <option value="">Select One...</option>
        <option value="one">ONE</option>
        <option value="two">TWO</option>
    </select>
    <input type="submit" />
</form>​

jQuery:

$(document).ready(function() {
    $('#campaignForm').validate({
        rules: {
            html_url: {
                required: true
            }
        },
        messages: {
            html_url: {
                required: 'Please select a template'
            }
        }
    });
});​