Validasi grup tombol radio menggunakan plugin validasi jQuery

Bagaimana cara melakukan validasi untuk grup tombol radio (satu tombol radio harus dipilih) menggunakan plugin validasi jQuery?

Dengan rilis jquery yang lebih baru (1,3+ saya pikir), yang harus Anda lakukan adalah mengatur salah satu anggota set radio yang diperlukan dan jquery akan mengurus sisanya:

<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

Di atas akan membutuhkan setidaknya 1 dari 3 opsi radio dengan nama "opsi saya" untuk dipilih sebelum melanjutkan.

Saran label oleh Mahes, btw, bekerja luar biasa!

gunakan aturan berikut untuk memvalidasi pemilihan grup tombol radio

myRadioGroupName : {required :true}

myRadioGroupName adalah nilai yang Anda berikan untuk atribut nama

Anda juga dapat menggunakan ini:

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

dan cukup tambahkan aturan ini

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

Sebutkan cara menambahkan aturan.

Sesuai jawaban Brandon. Tetapi jika Anda menggunakan ASP.NET MVC yang menggunakan validasi tidak mencolok, Anda dapat menambahkan atribut data-val ke yang pertama. Saya juga suka memiliki label untuk setiap tombol radio untuk kegunaan.

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

Cara lain untuk memvalidasi adalah seperti ini.

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

Saya harap teladan saya akan membantu Anda

Saya memiliki masalah yang sama. Buat hanya menulis sorot khusus dan fungsi unhighlight untuk validator. Menambahkan ini ke opsi validaton harus menambahkan kelas kesalahan ke elemen dan label masing-masing:

        '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);
            }
        },

kode untuk tombol radio -

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

dan jQuery code-

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

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

Letakkan pesan kesalahan di atas.

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