Validasi grup tombol radio menggunakan plugin validasi jQuery

128

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

jquery validation

— pengguna27052
sumber

Lihat jawabannya dari c.reeves di forum.jquery.com/topic/…

Di luar ada validator jQuery baru yang sangat kuat dan mudah digunakan. Anda dapat memeriksanya: code.google.com/p/bvalidator

— Nenad

tidak ingin menyertakan seluruh perpustakaan untuk sesuatu yang sesederhana ini

— Doug Molineux

113

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!

— Brandon Rome
sumber

Ini sekarang jawaban terbaik bagi saya dengan pembaruan ke jQuery. +1.

— Kieran Andrews

6

Satu-satunya masalah dengan ini adalah ketika tidak ada yang diperiksa, validasi jQuery menyoroti tombol radio pertama berwarna merah, tetapi pada kenyataannya Anda mungkin ingin menyorot SEMUA dari mereka. Juga, setelah Anda memeriksa tombol radio apa saja, warna merah akan hilang.

— Haacked

2

@Haacked Anda dapat menggunakan fungsi callback errorPlacement dalam opsi validasi untuk menempatkan pesan kesalahan di tempat yang bermakna?

— autonomatt

2

@Haacked: menambahkan focusInvalid: falseke validate()opsi akan mencegah penyorotan tombol radio pertama.

— Jim Miller

2

Saya selalu melakukannya dengan cara ini dan menempatkan label kesalahan dalam fungsi errorPlacement. Inilah yang saya lakukan untuk tombol radio: if (element.is ("input: radio")) {error.insertAfter (element.parent ()); } else {error.insertAfter (elemen); }

— Francisco Goldenstein

24

gunakan aturan berikut untuk memvalidasi pemilihan grup tombol radio

myRadioGroupName : {required :true}

myRadioGroupName adalah nilai yang Anda berikan untuk atribut nama

— Mahes
sumber

15

Perhatikan bahwa jika Anda ingin mengontrol posisi label, Anda dapat memberikan label kesalahan Anda sendiri di mana Anda menginginkannya dengan teks yang Anda inginkan: <label for = "myRadioGroupName" class = "error" style = "display: none; "> Silakan pilih satu. </label>

— Tom

@ Tom tidak ada gunanya menulis sendiri labeltag untuk kesalahan, sebenarnya plugin menambahkan secara otomatis tag label kesalahan ini.

— ahmehri

3

Beberapa waktu yang lalu, tapi saya membayangkan apa yang saya coba lakukan adalah menempatkan <label> di tempat lain di DOM, daripada di tempat itu dibuat secara otomatis oleh plugin. Juga, sangat mungkin perilaku plugin telah berubah dalam 5 tahun terakhir ...

— Tom

Sedih bagaimana ini membutuhkan "nama" dan bukan "tipe" di sini untuk kesalahan khusus.

— justdan23

19

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.

— Haider Abbas
sumber

1

Tapi ini akan membawa kesalahan pada validasi HTML5 yang saya percaya karena atribut for perlu menjadi referensi ID (yang kita tidak dapat mengatur 3 tombol radio untuk ID yang sama).

— armyofda12mnkeys

1

Ada perbedaan besar antara atribut nama dan atribut id.

— Norman H

2

Harap jangan tombol radio hanya mengembalikan satu nilai, karena itu, name="myoptions[]"ini agak membingungkan karena mengisyaratkan beberapa nilai dapat dikembalikan.

— Demensik

Letakkan pesan kesalahan di atas. <style> .radio-group {position: relative; margin-top: 40px; } # myoptions-error {position: absolute; atas: -25px; } </style> <div class = "radio-group"> <input type = "radio" name = "myoptions" value = "blue" class = "required"> Biru <br /> <input type = "radio" name = "myoptions" value = "red"> Merah <br /> <input type = "radio" name = "myoptions" value = "green"> Hijau </div> </div> <! - end radio- grup ->

— Sonobor

4

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>

— Matt Frear
sumber

3

Cara lain untuk memvalidasi adalah seperti ini.

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

Saya harap teladan saya akan membantu Anda

— strudeltercero
sumber

2

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

— Cin
sumber

2

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>

— Sayli Vaidya
sumber

0

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

— Sonobor
sumber