如何使用 jQuery 验证插件对单选按钮组进行验证（应该选择一个单选按钮）？
【问题讨论】：
标签： jquery validation
对于较新版本的 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
上述操作需要在继续之前选择 3 个带有“我的选项”名称的单选选项中的至少 1 个。
顺便说一句，Mahes 的标签建议非常有效！
【讨论】：
focusInvalid: false 添加到validate() 选项将阻止突出显示第一个单选按钮。
使用以下规则验证单选按钮组选择
myRadioGroupName : {required :true}
myRadioGroupName 是您赋予 name 属性的值
【讨论】：
label标签是没用的，实际上插件会自动添加这个错误标签标签。
你也可以这样用：
<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 }
}
提及如何添加规则。
【讨论】：
name="myoptions[]" 有点令人困惑，因为它暗示可以返回多个值。
根据布兰登的回答。但是，如果您使用的是使用非侵入式验证的 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]");
希望我的例子对你有帮助
【讨论】：
我遇到了同样的问题。结束只是为验证器编写一个自定义的高亮和取消高亮功能。将此添加到验证选项应将错误类添加到元素及其各自的标签：
'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 -->
【讨论】：