jQuery ตรวจสอบความถูกต้องเลือก

ฉันพยายามตรวจสอบองค์ประกอบการเลือก html โดยใช้ปลั๊กอินการตรวจสอบ jQuery ฉันตั้งค่ากฎ "ต้อง" เป็นจริง แต่จะผ่านการตรวจสอบความถูกต้องเสมอเพราะดัชนีศูนย์จะถูกเลือกตามค่าเริ่มต้น มีวิธีใดในการกำหนดค่าว่างที่ถูกใช้โดยกฎที่ต้องการ?

UPD ตัวอย่าง. ลองนึกภาพเรามีตัวควบคุม html ต่อไปนี้:

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

ฉันต้องการให้ปลั๊กอินการตรวจสอบความถูกต้องใช้ค่า "default" เป็นค่าว่าง

คุณสามารถเขียนกฎของคุณเอง!

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

วิธีแก้ปัญหาที่ง่ายขึ้นได้รับการอธิบายไว้ที่นี่: ตรวจสอบกล่องเลือก

ทำให้ค่าว่างและเพิ่มแอตทริบิวต์ที่จำเป็น

<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 requiredwill 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="myselect">

2. แทนที่จะทำงานกับ attribute value = "default" ในตัวเลือก tag ให้ปิดการใช้งานตัวเลือก default หรือ set value = "" ตามที่ Andrew Coats แนะนำ

   <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 ใช้งานได้เฉพาะเมื่อคุณมีตัวเลือกเพียงตัวเดียวในแบบฟอร์มของคุณ หากคุณต้องการให้โซลูชันของเขาทำงานมากกว่าหนึ่งเลือกให้เพิ่มแอตทริบิวต์ชื่อให้กับการเลือกของคุณ

หวังว่ามันจะช่วย! :)

นี่คือตัวอย่างที่ง่ายและเข้าใจได้:

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

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

เลือกค่าจะว่างเปล่า

ง่ายมากคุณต้องได้รับค่าฟิลด์เลือกและไม่สามารถเป็น "ค่าเริ่มต้น" ได้

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

วิธีการแก้ปัญหาดังกล่าวโดย @JMP ทำงานในกรณีของฉันกับการเปลี่ยนแปลงเล็ก ๆ น้อย ๆ : ผมใช้element.valueแทนในvalueaddmethod

$.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 ควรทำงานในกรณีปกติ

วิธีการตรวจสอบความถูกต้องของการเลือก "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;
        }
    });

});