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

120

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

2008-11-10 user27052

外面有一个新的jQuery的验证，这是非常强大的，易于使用。你可以查看：http：//code.google.com/p/bvalidator/ – Nenad 2011-01-13 13:01:23

不想包含整个库，只需要这样简单的东西 – 2011-02-03 19:07:38

看看c.reeves在http：//的答案forum.jquery.com/topic/jquery-validate-plugin-radio-buttons-dependent-fields – 2010-11-29 18:01:23

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

myRadioGroupName : {required :true}

myRadioGroupName是你给name属性值

来源

2009-12-03 21:54:03 Mahes

109

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

上面将需要吨的至少1他在继续之前选择3个无线电选项，并选择“我的选项”的名称。

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

来源

2010-07-27 21:01:26

您也可以使用此：

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

提及如何添加规则。

来源

2010-08-22 03:48:35

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

来源

2011-05-12 20:56:39 Cin

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

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

我希望我的例子会帮助你

来源

2012-09-13 17:33:51 strudeltercero

按布兰登的答案。但是，如果您使用的是使用不显眼验证的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>

来源

2012-11-08 16:28:00

码 -

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

来源

2014-04-01 06:24:41

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

回答

相关问题