jQuery 验证插件:如何验证下拉列表

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13574690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 12:45:40  来源:igfitidea点击:

jQuery Validate Plugin: how to validate a dropdown

jqueryhtmljquery-validate

提问by sehummel

I'm trying to use the jQuery Validate plugin to validate a dropdown. It validates the rest of my form correctly. But it doesn't work on the dropdown.

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

Here is my jQuery:

这是我的 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'
    }
});

Here is my HTML:

这是我的 HTML:

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

What am I doing wrong? Are my variable names colliding somehow. The rule for campaign name works fine.

我究竟做错了什么?我的变量名称是否以某种方式发生冲突。广告系列名称规则工作正常。

回答by Sparky

If you just want to make a selectelement required, you would not use depends:because it does not "depend" on another element. In your usage, the dependsproperty is simply toggling the requiredrule. The problem here is not the requiredrule... it does not need to be toggled. The problem is that the requiredrule will not work when all options already contain a value, since requiredwill always be satisfied.

如果你只是想制作一个select元素required,你不会使用,depends:因为它不“依赖”另一个元素。在您的使用中,该depends属性只是切换required规则。这里的问题不是required规则……它不需要切换。问题是required当所有选项都包含 a 时,该规则将不起作用value,因为required将始终满足。

Simply use value=""for the default option, and then set your rules just like any other element.

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

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

jsFiddle DEMO

jsFiddle 演示

HTML:

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:

jQuery:

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

回答by MTran

If for some reason you can't set the value to blank like Spark said, you can just add your own JQuery validation function instead of the default required preset.

如果由于某种原因您不能像 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'
    }
});

回答by Rahmat Afridi

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