jQuery验证插件：如何验证下拉菜单 [英] jQuery Validate Plugin: how to validate a dropdown

问题描述

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

以下是我的jQuery：

  $（'＃campaignForm'）。validate（{
 rules：{
 campaign_name：{
 required：true 
}，
 html_url：{
所需：{
 depends：function（element）{
 return $（'＃html_url'）。val（）=='none'; 
} 
} 
} 
}，
消息：{
 campaign_name：'请输入广告系列名称'，
 html_url：'请选择一个模板'
} 
}）; 
  

这是我的HTML：

 < select name =html_urlid =html_url> 
< option value =none>选择一个...< / option> 
 ... 
< / select> 
  

我做错了什么？我的变量名称是以某种方式碰撞的。广告系列名称的规则可以正常工作。

解决方案

如果您只想制作，请选择 depends：，因为它不会依赖 元素另一个元素。在您的使用中，取决于属性只是简单地切换所需的规则。这里的问题不是所需的规则......它不需要切换。问题在于，当所有选项已包含值时，规则将不起作用，因为 >必填将始终得到满足。

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

 < option value =>选择一个。 ..< /选项> b 
 
 
 $ b 
 nofollow noreferrer>  jsFiddle DEMO   
 
 
  HTML： 
 < form id =campaignForm> 
< select name =html_urlid =html_url> 
< option value =>选择一个...< / option> 
< option value =one> ONE< / option> 
< option value =two> TWO< / option> 
< / select> 
< input type =submit/> 
  
  
  jQuery： 
  $（document）.ready（function（）{
 $（'＃campaignForm'）。validate（{
规则：{
 html_url：{
 required：true 
} 
}，
消息：{
 html_url：{
 required： '请选择一个模板'
} 
} 
}）; 
}）; 
  
 
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.

Here is my 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:
<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.
解决方案
If you just want to make a select element required, you would not use depends: because it does not "depend" on another element.  In your usage, the depends property is simply toggling the required rule.  The problem here is not the required rule... it does not need to be toggled.  The problem is that the required rule will not work when all options already contain a value, since required will always be satisfied.

Simply use value="" for the default option, and then set your rules just like any other element.
<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'
            }
        }
    });
});​


                        
这篇关于jQuery验证插件：如何验证下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！