jQuery Validate Required Select

Question

我正在尝试使用jQuery Validate插件验证html select元素.我将"required"规则设置为true,但它总是通过验证,因为默认情况下会选择零索引.有没有办法定义所需规则使用的空值？

UPD.例.想象一下,我们有以下html控件:

<select>
  <option value="default">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

我希望Validation插件使用"default"值为空.

Answer 1

此处概述了一种更简单的解决方案: 验证选择框

使值为空并添加必需的属性

<select id="select" class="required">
<option value="">Choose an option</option> 
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

Answer 2

你可以写自己的规则!

 // add the rule here
 $.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg !== value;
 }, "Value must not equal arg.");

 // configure your validation
 $("form").validate({
  rules: {
   SelectName: { valueNotEquals: "default" }
  },
  messages: {
   SelectName: { valueNotEquals: "Please select an item!" }
  }  
 });

Answer 3

最简单的解决方案

只需将第一个选项的值设置为空字符串即可 value=""

<option value="">Choose...</option>

和jquery验证 required规则 will work

Answer 4

使用最小规则

将第一个选项值设置为0

'selectName':{min:1}

Answer 5

你只需要把validate[required]这个选择的类放在一起,然后放一个值为""的选项

例如:

<select class="validate[required]">
  <option value="">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Answer 6

我不知道问题被问到的时间是什么(2010年),但我今天遇到了同样的问题并以这种方式解决了它:

1. 为您的选择标记提供名称属性.例如在这种情况下

   <select name="myselect">

2. 不使用标签选项中的属性value ="default",而是按照Andrew Coats的建议禁用默认选项或设置value =""

   <option disabled="disabled">Choose...</option>

   要么

   <option value="">Choose...</option>

3. 设置插件验证规则

   $( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });

   要么

   <select name="myselect" class="required">

Obs:Andrew Coats的解决方案只有在您的表单中只有一个选择时才有效.如果您希望他的解决方案与多个选项一起使用,请为您的选择添加名称属性.

希望能帮助到你!:)

Answer 7

<select class="design" id="sel" name="subject">
   <option value="0">- Please Select -</option>
   <option value="1"> Example1 </option>
   <option value="2"> Example2 </option>
   <option value="3"> Example3 </option>
   <option value="4"> Example4 </option>
</select>
<label class="error" id="select_error" style="color:#FC2727">
   <b> Warning : You have to Select One Item.</b>
</label>
<input type="submit" name="sub" value="Gönder" class="">

查询：

jQuery(function() {  
    jQuery('.error').hide(); // Hide Warning Label. 
    jQuery("input[name=sub]").on("click", function() {
        var returnvalue;
        if(jQuery("select[name=subject]").val() == 0) {
            jQuery("label#select_error").show(); // show Warning 
            jQuery("select#sel").focus();  // Focus the select box      
            returnvalue=false;   
        }
        return returnvalue;
    });
});  // you can change jQuery with $