Xác thực nhóm nút radio bằng cách sử dụng plugin xác thực jQuery

Làm cách nào để thực hiện xác thực cho một nhóm nút radio (nên chọn một nút radio) bằng cách sử dụng plugin xác thực jQuery?

Với các bản phát hành mới hơn của jquery (1.3+ tôi nghĩ), tất cả những gì bạn phải làm là đặt một trong những thành viên của đài phát thanh được yêu cầu và jquery sẽ lo phần còn lại:

<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

Ở trên sẽ yêu cầu ít nhất 1 trong 3 tùy chọn radio với tên "tùy chọn của tôi" được chọn trước khi tiếp tục.

Gợi ý nhãn của Mahes, btw, hoạt động tuyệt vời!

sử dụng quy tắc sau để xác thực lựa chọn nhóm nút radio

myRadioGroupName : {required :true}

myRadiogroupName là giá trị bạn đã cung cấp cho thuộc tính name

Bạn cũng có thể sử dụng điều này:

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

và chỉ cần thêm quy tắc này

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

Đề cập đến cách thêm quy tắc.

Theo câu trả lời của Brandon. Nhưng nếu bạn đang sử dụng ASP.NET MVC sử dụng xác nhận không phô trương, bạn có thể thêm thuộc tính data-val vào thuộc tính đầu tiên. Tôi cũng muốn có nhãn cho mỗi nút radio cho khả năng sử dụng.

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

Một cách khác để xác nhận là như thế này.

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

Tôi hy vọng ví dụ của tôi sẽ giúp bạn

Tôi đã từng gặp vấn đề tương tự. Làm tổn thương chỉ cần viết một chức năng tô sáng và làm nổi bật tùy chỉnh cho trình xác nhận. Thêm phần này vào các tùy chọn hợp lệ sẽ thêm lớp lỗi vào phần tử và nhãn tương ứng của nó:

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

mã cho nút 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"/>

và mã 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>

Đặt thông báo lỗi lên trên.

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