การตรวจสอบความถูกต้องของกลุ่มปุ่มตัวเลือกโดยใช้ปลั๊กอินการตรวจสอบ jQuery

วิธีดำเนินการตรวจสอบความถูกต้องสำหรับกลุ่มปุ่มตัวเลือก (ควรเลือกปุ่มตัวเลือกหนึ่งปุ่ม) โดยใช้ปลั๊กอินตรวจสอบ jQuery

ด้วย jquery รุ่นใหม่กว่า (ฉันคิดว่า 1.3+) สิ่งที่คุณต้องทำคือตั้งค่าหนึ่งในสมาชิกของชุดวิทยุที่จำเป็นและ jquery จะดูแลส่วนที่เหลือ:

<input type="radio" name="myoptions" value="blue" class="required"> Blue<br />
<input type="radio" name="myoptions" value="red"> Red<br />
<input type="radio" name="myoptions" value="green"> Green

ข้างต้นจะต้องมีตัวเลือกวิทยุอย่างน้อย 1 ใน 3 ตัวเลือกที่มีชื่อ "ตัวเลือกของฉัน" ก่อนดำเนินการต่อ

คำแนะนำฉลากโดย Mahes, btw ทำงานได้อย่างยอดเยี่ยม!

ใช้กฎต่อไปนี้เพื่อตรวจสอบการเลือกกลุ่มปุ่มตัวเลือก

myRadioGroupName : {required :true}

myRadioGroupName คือค่าที่คุณกำหนดให้กับแอตทริบิวต์ name

คุณยังสามารถใช้สิ่งนี้:

<fieldset>
<input type="radio" name="myoptions[]" value="blue"> Blue<br />
<input type="radio" name="myoptions[]" value="red"> Red<br />
<input type="radio" name="myoptions[]" value="green"> Green<br />
<label for="myoptions[]" class="error" style="display:none;">Please choose one.</label>
</fieldset>

และเพิ่มกฎนี้

rules: {
 'myoptions[]':{ required:true }
}

พูดถึงวิธีเพิ่มกฎ

ตามคำตอบของ Brandon แต่ถ้าคุณใช้ ASP.NET MVC ซึ่งใช้การตรวจสอบความถูกต้องที่ไม่สร้างความรำคาญคุณสามารถเพิ่มแอตทริบิวต์ data-val ลงในอันแรกได้ ฉันยังต้องการให้มีป้ายกำกับสำหรับปุ่มตัวเลือกแต่ละปุ่มเพื่อการใช้งาน

<span class="field-validation-valid" data-valmsg-for="color" data-valmsg-replace="true"></span>
<p><input type="radio" name="color" id="red" value="R" data-val="true" data-val-required="Please choose one of these options:"/> <label for="red">Red</label></p>
<p><input type="radio" name="color" id="green" value="G"/> <label for="green">Green</label></p>
<p><input type="radio" name="color" id="blue" value="B"/> <label for="blue">Blue</label></p>

อีกวิธีหนึ่งในการตรวจสอบความถูกต้องก็เป็นเช่นนี้

var $radio = $('input:radio[name="nameRadioButton"]');
$radio.addClass("validate[required]");

ฉันหวังว่าตัวอย่างของฉันจะช่วยคุณได้

ผมมีปัญหาเหมือนกัน. ยุ่งยากเพียงแค่เขียนไฮไลต์แบบกำหนดเองและฟังก์ชันยกเลิกไฮไลต์สำหรับตัวตรวจสอบความถูกต้อง การเพิ่มสิ่งนี้ในตัวเลือก validaton ควรเพิ่มระดับข้อผิดพลาดให้กับองค์ประกอบและป้ายกำกับตามลำดับ:

        'highlight': function (element, errorClass, validClass) {
            if($(element).attr('type') == 'radio'){
                $(element.form).find("input[type=radio]").each(function(which){
                    $(element.form).find("label[for=" + this.id + "]").addClass(errorClass);
                    $(this).addClass(errorClass);
                });
            } else {
                $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
                $(element).addClass(errorClass);
            }
        },
        'unhighlight': function (element, errorClass, validClass) {
            if($(element).attr('type') == 'radio'){
                $(element.form).find("input[type=radio]").each(function(which){
                    $(element.form).find("label[for=" + this.id + "]").removeClass(errorClass);
                    $(this).removeClass(errorClass);
                });
            }else {
                $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
                $(element).removeClass(errorClass);
            }
        },

รหัสสำหรับปุ่มตัวเลือก -

<div>
<span class="radio inline" style="margin-right: 10px;">@Html.RadioButton("Gender", "Female",false) Female</span>
<span class="radio inline" style="margin-right: 10px;">@Html.RadioButton("Gender", "Male",false) Male</span>                                                        
<div class='GenderValidation' style="color:#ee8929;"></div>    
</div> 

<input class="btn btn-primary" type="submit" value="Create" id="create"/>

และรหัส jQuery-

<script>
    $(document).ready(function () {
        $('#create').click(function(){

            var gender=$('#Gender').val();
            if ($("#Gender:checked").length == 0){
                $('.GenderValidation').text("Gender is required.");
                return false;
            }
        });
    });
</script>

วางข้อความแสดงข้อผิดพลาดไว้ด้านบน

   <style> 

 .radio-group{ 
      position:relative; margin-top:40px; 
 } 

 #myoptions-error{ 
     position:absolute; 
     top: -25px; 
  } 

 </style> 

 <div class="radio-group"> 
 <input type="radio" name="myoptions" value="blue" class="required"> Blue<br /> 
 <input type="radio" name="myoptions" value="red"> Red<br /> 
 <input type="radio" name="myoptions" value="green"> Green </div>
 </div><!-- end radio-group -->