使用 jQuery 验证插件验证单选按钮组

Validation of radio button group using jQuery validation plugin

提问by user27052

How to perform validation for a radio button group (one radio button should be selected) using jQuery validation plugin?

如何使用 jQuery 验证插件对单选按钮组（应选择一个单选按钮）执行验证？

回答by Brandon Rome

With newer releases of jquery (1.3+ I think), all you have to do is set one of the members of the radio set to be required and jquery will take care of the rest:

对于较新版本的 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

The above would require at least 1 of the 3 radio options w/ the name of "my options" to be selected before proceeding.

以上将需要在继续之前选择 3 个无线电选项中的至少 1 个带有“我的选项”的名称。

The label suggestion by Mahes, btw, works wonderfully!

Mahes 的标签建议，顺便说一句，效果很好！

回答by Mahes

use the following rule for validating radio button group selection

使用以下规则验证单选按钮组选择

myRadioGroupName : {required :true}

myRadioGroupName is the value you have given to name attribute

myRadioGroupName 是您赋予 name 属性的值

回答by Haider Abbas

You can also use this:

你也可以使用这个：

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

and simply add this rule

只需添加此规则

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

Mention how to add rules.

提及如何添加规则。

回答by Matt Frear

As per Brandon's answer. But if you're using ASP.NET MVC which uses unobtrusive validation, you can add the data-val attribute to the first one. I also like to have labels for each radio button for usability.

根据布兰登的回答。但是，如果您使用的是使用非侵入式验证的 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>

回答by strudeltercero

Another way to validate is like this.

另一种验证方式是这样的。

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

I hope my example will help you

我希望我的例子能帮助你

回答by Sayli Vaidya

code for radio button -

单选按钮代码 -

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

and jQuery code-

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

回答by Cin

I had the same problem. Wound up just writing a custom highlight and unhighlight function for the validator. Adding this to the validaton options should add the error class to the element and its respective label:

我有同样的问题。结束只是为验证器编写自定义突出显示和取消突出显示功能。将此添加到验证选项应将错误类添加到元素及其各自的标签：

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

回答by Sonobor

Puts the error message on top.

将错误消息放在最上面。

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