jQuery验证选择框答案

【问题标题】：jQuery validate select boxjQuery验证选择框
【发布时间】：2010-12-06 07:58:52
【问题描述】：

我正在使用 jQuery 验证插件进行表单验证，但我无法验证列表/选择框

<select id="select">
 <option value="-1">Choose an option</option>
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
</select>

现在，我想确保用户选择“选择一个选项”（这是默认选项，值为 -1）以外的任何选项。这样它就不会验证您是否选择了第一个选项。如何做到这一点？

【问题讨论】：

jQuery Validate Required Select的可能重复

标签： jquery jquery-validate

【解决方案1】：

将<option value="">Choose an option</option> 设为空白而不是-1

使用 jquery 验证

rules: {                      
                select: "required"
}

【讨论】：

可能这是最简单的方法。

【解决方案2】：

您可以使用Jquery Validator custom rule。

here 讨论了一个类似的例子。以下代码来自示例：

// 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: "-1" }
  },
  messages: {
   SelectName: { valueNotEquals: "Please select an item!" }
  }  
 });

【讨论】：

@否决选民：为什么？我知道“选择：必需”有效，但这个答案也是有效的。它还为您提供更多空间来自定义错误消息。

【解决方案3】：

将此添加到您的规则中

select:{
  required: function(element) {
    if( $("#select").val() =='-1'){
      return false;
    } else {
      return true;
    }
  }
}

【讨论】：

【解决方案4】：

或者使用元素值：

required: function(elm) {
    if(elm.options[elm.options.selectedIndex].value != "-1") {
        return true;
    } else {
        return false;
    }
}

【讨论】：

【解决方案5】：

为什么不使用条件的值？

required: function(elm) {
    return (elm.options[elm.options.selectedIndex].value != "-1");
}

这与 Robin 的解决方案相同，但要短得多。

【讨论】：

【解决方案6】：

我们如何验证 jquery ui 选择下拉菜单

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
<script>
$(".intselect").selectmenu();
$().ready(function() {


jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#validateregister" ).validate({
  rules: {
	  firstname: {
      required: true
    },
	 email: {
      required: true,
	  email: true
    },
    year: {
      required: true
    }
  }
  
});
$('#validateregister').change(function() {
        if ($("#validateregister").valid()) {
            $(".go").removeAttr("disabled");
        }
		else{
			 $(".go").attr("disabled","disabled");
		}
    });
});
</script>

"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<form id="validateregister" style="width: 300px;">
  <div> <br />
    <input type="text" name="firstname" class="form-control" id="firstname" />
  </div>
  <div> <br />
    <input type="text" name="email" class="form-control" id="email" />
  </div>
  <div> <br />
    <select class="form-control intselect" name="year" id="year">
      <option value="">Select year</option>
      <option value="2014">2014</option>
      <option value="2015">2015</option>
      <option value="2016">2015</option>
    </select>
  </div>
  <div> <br />
    <input type="submit" class="btn btn-default go" value="submit" disabled>
  </div>
</form>

【讨论】：