jQuery验证插件：如何验证下拉菜单

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>

我做错了什么？我的变量名是否发生了冲突。广告系列名称规则正常运行。

- sehummel

---

我已经尝试了两种方法，但都没有收到任何消息。它可能是正确验证了，只是消息没有显示出来吗？如果是这样，我该如何让它显示出来？ - sehummel

这实际上可能是问题的一部分：https://dev59.com/u2865IYBdhLWcg3wHK3u#9890284 - Matt Ball

不是很确定你的问题，因为你对 depends: 选项的使用有些误导性。如果你只想将一个 select 标签设置为必填项，你不需要使用 depends:，因为它并不“依赖”于其他元素...请看我的答案。 - Sparky

您的 depends 属性仅切换 required 规则。然而，当所有选项已经包含 value 时，required 规则将无法工作，因为 required 总是被满足。 - Sparky

Answer 1

如果你只想让一个 select 元素成为必填项，那么就不需要使用 depends:，因为它并不是“依赖”于另一个元素。在这种情况下，depends 属性只是简单地切换 required 规则。问题不在于 required 规则本身... 它不需要被切换。问题在于当所有选项都已经包含了一个value时，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'
            }
        }
    });
});​

- Sparky

---

为什么要使用 value=""？为什么 depend: "required" 不起作用？ - Prashant Tapase

@Prashant，因为如果value没有设置为空白，那么插件怎么知道没有进行选择？value=""是告诉插件尚未进行选择的选项。depends属性仅切换required规则。但是，当所有选项已经包含value时，required规则将无法工作，因为required始终会被满足。 - Sparky

Answer 2

如果因为某些原因你不能像Spark所说的那样将值设置为空白，你可以添加自己的JQuery验证函数来代替默认的必填项预设。

$.validator.addMethod("aFunction",
    function(value, element) {
        if (value == "none")
            return false;
        else
            return true;
    },
    "Please select a value");

$('#campaignForm').validate({
    rules: {
         campaign_name: {
             required: true
         },
         html_url: {
             aFunction: true
         }
    },
    messages: {
        campaign_name: 'Please enter a campaign name',
        html_url: 'Please select a template'
    }
});

- MTran

Answer 3

$('#campaignForm').validate({
    rules: {
        html_url: {
            min: 1,
        }
    },
    messages: {
        html_url: 'Please select a template',
    }
});

- Rahmat Afridi