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

小开

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

myRadioGroupName : {required :true}

MyRadioGroupName 是您给 name 属性赋的值

小开

对于新版本的 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个/“我的选项”的名称。

马赫斯的标签建议，顺便说一下，工作非常出色！

小开

你也可以这样做:

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

提到如何添加规则。

小开

我也有同样的问题。最后只是为验证器编写了一个自定义突出显示和非突出显示函数。将其添加到 validaton 选项应该将错误类添加到元素及其各自的标签:

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

小开

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

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

我希望我的例子能对你有所帮助

小开

根据布兰登的回答。但是如果您使用的是 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>

小开

无线电按钮代码-

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

$(document).ready(function () {
$('#create').click(function(){
var gender=$('#Gender').val();


if ($("#Gender:checked").length == 0) {
$('.GenderValidation').text("Gender is required.");
return false;
}
});
});

小开

将错误消息放在顶部。

.radio-group {
position: relative;
margin-top: 40px;
}


#myoptions-error {
position: absolute;
top: -25px;
}

<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><!-- end radio-group -->