使用jQueryvalidation插件validation单选button组

如何使用jQueryvalidation插件执行单选button组的validation（应该select一个单选button）？

Answer 1

随着更新版本的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 

以上要求在继续之前select3个无线电选项中的至less一个，并select“我的选项”的名称。

顺便说一句，Mahes的标签build议，奇妙的工作！

Answer 2

使用以下规则validation单选button组select

 myRadioGroupName : {required :true} 

myRadioGroupName是您赋予name属性的值

Answer 3

你也可以使用这个：

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

提及如何添加规则。

Answer 4

另一种validation方式就是这样。

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

我希望我的榜样能帮助你

Answer 5

按照布兰登的回答。 但是，如果您使用的ASP.NET MVC使用不显眼的validation，您可以将data-val属性添加到第一个。 我也喜欢每个单选button的可用性标签。

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

Answer 6

我有同样的问题。 伤心只是为validation者写一个自定义的高亮和unighighlight函数。 将此添加到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); } }, 

Answer 7

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

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