English 中文(简体)
使用jQuery验证插件验证单选按钮组。
原标题:
  • 时间:2008-11-10 10:47:47
  •  标签:

如何使用jQuery校验插件来执行单选按钮组的验证(必须选择一个单选按钮)?

问题回答

随着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提到的标签建议非常有效!

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

myRadioGroupName : {required :true}

myRadioGroupName是您给予的name属性的值。

你也可以使用这个:

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

提及如何添加规则。

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

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




相关问题
热门标签