jQuery 验证必选选择框

Question

我正在尝试使用jQuery验证插件来验证HTML选择元素。我将"required"规则设置为true，但它总是通过验证，因为默认情况下选择了零索引。有没有办法定义空值以便符合必填规则？

更新。示例。假设我们有以下HTML控件：

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

我希望Validation插件将“default”值作为空值。

- SiberianGuy

---

请放一些代码片段，以便我们提供帮助。 - Lee

可能重复：https://dev59.com/rHM_5IYBdhLWcg3wslRW - cregox

Answer 1

这里提出了一个更简单的解决方案：验证选择框

将值设置为空，并添加required属性。

<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>

- Andrew Coats

---

但是你必须给你的选项一个空值——这并不总是可能或可取。 - Muleskinner

这不应该被接受作为答案，因为原帖明确要求使用“rules”，这是提供给验证构造函数的一个选项，而不是在标记中出现的。有时您没有修改标记的权限。(而且就我个人而言，我更喜欢不将逻辑放在标记中。) - Mason Houtz

@MasonHoutz，无论逻辑预期值为""还是"value=default"，都仍然在标记中存在逻辑。 - billrichards

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!" }
  }  
 });

- JMP

---

你可以测试所选文本而不是值，像这样：$.validator.addMethod("valueNotEquals", function(value, element, arg){ return return arg != jQuery(element).find('option:selected').text(); }, "Value must not equal arg."); - Pablo S G Pacheco

为了帮助未来的读者：SelectName 指的是 name 属性的值，而不是 id 属性的值。这有点令人困惑，因为在使用 JS 时，通常会使用 id 而不是 name。请查看此处的文档（http://jqueryvalidation.org/validate）：“规则（默认值：从标记（类、属性、数据）中读取规则）类型：对象定义自定义规则的键/值对。键是元素的 name”。 - Dror

Answer 3

最简单的解决方案

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

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

并且 jQuery验证 的 required 规则 将会生效

- Basheer AL-MOMANI

Answer 4

使用最小值规则

将第一个选项的值设为0

'selectName':{min:1}

- Funky Dude

---

第一个值是固定的（有一些后端逻辑针对这个值） - SiberianGuy

Answer 5

您只需要将 validate[required] 作为此下拉框的类，并加入一个值为 "" 的选项即可。

例如：

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

- omalave

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">

注意：Andrew Coats的解决方案只适用于您的表单中只有一个选择。如果您想让他的解决方案在多个选择中起作用，请向您的选择添加一个名称属性。

希望对您有所帮助！ :)

- Pedro Paulo Mendes Pereira

---

简而言之，在<select>标签中添加'required'属性，并在第一个<option>标签（或具有'selected'属性的标签）中添加'disabled'属性。 - Stephen

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 :

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 $

- Farukest

Answer 8

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

 <form id="myform"> 
       <select class="form-control" name="user_type">
        <option value="">Select</option>
        <option value="2">1</option>
        <option value="3">2</option>
        </select>
       </form>


<script>
  $('#myform').validate({ // initialize the plugin
            rules: {
          user_type:{ required: true},
         }
      });
</script>

的值将为空白。

- abhishek kumar

---

虽然这段代码片段可能解决了问题，但包括解释真的有助于提高您的帖子质量。请记住，您正在为未来的读者回答问题，而这些人可能不知道您的代码建议原因。请尽量不要在代码中添加过多的解释性注释，这会降低代码和解释的可读性！ - Filnor

Answer 9

@JMP提到的解决方案在我的情况下有一点修改：我在addmethod中使用了element.value而不是value。

$.validator.addMethod("valueNotEquals", function(value, element, arg){
    // I use element.value instead value here, value parameter was always null
    return arg != element.value; 
}, "Value must not equal arg.");

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

可能我这里有一个特殊情况，但我没有追踪原因。但是@JMP的解决方案应该适用于常规情况。

- Legends

Answer 10

很简单，您需要获取选择字段的值，且它不能是“default”。

if($('select').val()=='default'){
    alert('Please, choose an option');
    return false;
}

- Maycow Moura