jquery验证所需选择

你可以写自己的规则!

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

这里概述了一个更简单的解决方案: Validate select box

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

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

最简单的解决方案

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

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

和 jquery validation required 规则 will work

使用最小规则

将第一个选项值设置为0

'selectName':{min:1}

你只需要把 validate[required] 作为该类的选择,然后将值为“”的选项放入

例如:

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

我不知道在问这个问题的时候插件是怎样的(2010年),但是我今天遇到了同样的问题,并用这种方式解决了它:

1. 给您的select标签一个name属性。例如,在这种情况下

   <select name="myselect">

2. 不要在标记选项中使用attribute value=“default”,而是按照Andrew Coats的建议禁用默认选项或set 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:只有在表单中只有一个选项时,AndrewCoats的解决方案才有效。如果您希望他的解决方案与多个选择一起使用,请向您的选择添加一个名称属性。

希望它有帮助!:)

下面是一个简单易懂的例子:

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

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

@jmp提到的解决方案在我的案例中只做了一点修改: 我用 element.value 而不是 value 在 addmethod .

$.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的解决方案应该在常规情况下有效。

这很简单,您需要获取select字段值,它不能是“默认值”。

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

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

$(document).ready(函数()。{

$('.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;
    }
});

(});

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

选择值将为空

       html
        <select class="design" id="sel" name="subject">
                <option >- 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><td>

            <input type="submit" name="sub" value="Gönder" class="">
**jQuery**

$(document).ready(function() {  
    if($("#sel").val() == null){
         alert('select a value)
         }
      });