jQuery 验证必需选择

Question

我正在尝试使用 jQuery Validate 插件验证 html select 元素。我将“必需”规则设置为 true，但它总是通过验证，因为默认选择零索引。有什么方法可以定义所需规则使用的空值吗？

UPD。例子。想象一下我们有以下 html 控件：

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

我希望验证插件使用“默认”值作为空。

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 验证< /a> 必需规则将起作用

Answer 4

使用最小规则

将第一个选项值设置为 0

'selectName':{min:1}

Answer 5

您只需将 validate[required] 作为此选择的类，然后放置一个带有 value="" 的选项，

例如：

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

Answer 6

我不知道问题提出时（2010 年）这个插件怎么样，但我今天遇到了同样的问题并以这种方式解决了它：

1. 给你的选择标签一个名称属性。例如本例

2. 不要使用标签选项中的属性 value="default"，而是禁用默认选项或设置 value=" “按照安德鲁·科茨的建议

   <选项禁用=“禁用”>选择...

   或

   选择...

3. 设置插件验证规则

   $( "#YOUR_FORM_ID" ).validate({
规则：{
myselect: { 必需: true }
}
});

   或

观察：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：

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 $

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>

选择值将为空

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 的解决方案应该适用于常规情况。

Answer 10

很简单，您需要获取 Select 字段值，并且它不能是“默认”。

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

Answer 11

如何验证选择“qualifica”它有 3 个选择

$(document).ready(function(){

    $('.validateForm').validate({
        rules: {
            fullname: 'required',
            ragionesociale: 'required',
            partitaiva: 'required',
            recapitotelefonico: 'required',
            qualifica: 'required',
            email: {
                required: true,
                email: true
            },
        },
        submitHandler: function(form) {

            var fullname = $('#fullname').val(),
                            ragionesociale = $('#ragionesociale').val(),
                            partitaiva = $('#partitaiva').val(),
                            email = $('#email').val(),
                            recapitotelefonico = $('#recapitotelefonico').val(),
                            qualifica = $('#qualifica').val(),
                            dataString = 'fullname=' + fullname + '&ragionesociale=' + ragionesociale + '&partitaiva=' + partitaiva + '&email=' + email + '&recapitotelefonico=' + recapitotelefonico + '&qualifica=' + qualifica;

            $.ajax({
                type: "POST",
                url: "util/sender.php",
                data: dataString,
                success: function() {

                    window.location.replace("./thank-you-page.php");


                }
            });
            return false;
        }
    });

});