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

Posted 2023-05-09

【中文标题】使用 jQuery 验证插件验证单选按钮组

【英文标题】：Validation of radio button group using jQuery validation plugin

【发布时间】：2010-09-21 14:41:52

【问题描述】：

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

【问题讨论】：

在forum.jquery.com/topic/…看c.reeves的答案

有一个新的 jQuery 验证器，它非常强大且易于使用。您可以查看：code.google.com/p/bvalidator

不想为这么简单的事情包含整个库

【参考方案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

上述操作需要在继续之前选择 3 个带有“我的选项”名称的单选选项中的至少 1 个。

顺便说一句，Mahes 的标签建议非常有效！

【讨论】：

这对我来说是 jQuery 更新的最佳答案。 +1。

唯一的问题是当它们都没有被选中时，jQuery validate 会以红色突出显示第一个单选按钮，但实际上您可能希望突出显示所有这些单选按钮。此外，一旦您选中任何单选按钮，红色应该会消失。

@Haacked 您可以在验证选项中使用 errorPlacement 回调函数将错误消息放置在有意义的地方吗？

@Haacked：将focusInvalid: false 添加到validate() 选项将阻止突出显示第一个单选按钮。

我总是这样做，并将错误标签定位在errorPlacement函数中。这就是我为单选按钮所做的： if (element.is("input:radio")) error.insertAfter(element.parent()); else error.insertAfter(element);

【参考方案2】：

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

myRadioGroupName : required :true

myRadioGroupName 是您赋予 name 属性的值

【讨论】：

注意，如果你想控制标签的位置，你可以在你想要的地方提供你自己的错误标签和你想要的文本：请选择一个。

@Tom 自己给错误写label标签是没用的，实际上插件会自动添加这个错误标签标签。

很久以前，但我想我想做的是将 放置在 DOM 中的其他位置，而不是插件自动创建的位置。此外，插件行为很可能在过去 5 年中发生了变化......

很遗憾它需要“名称”而不是“类型”来解决自定义错误。

【参考方案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 

提及如何添加规则。

【讨论】：

但这会在 html5 验证中带来错误，我相信因为 for 属性需要是一个 ID 引用（我们不能将 3 个单选按钮设置为相同的 ID）。

name属性和id属性有很大的不同。

请注意，单选按钮应该只返回一个值，因此，name="myoptions[]" 有点令人困惑，因为它暗示可以返回多个值。

将错误信息放在最上面。 蓝色 红色 绿色

【参考方案4】：

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

【参考方案5】：

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

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

希望我的例子对你有帮助

【参考方案6】：

我遇到了同样的问题。结束只是为验证器编写一个自定义的高亮和取消高亮功能。将此添加到验证选项应将错误类添加到元素及其各自的标签：

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

【参考方案7】：

单选按钮代码 -

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

【参考方案8】：

将错误消息放在最上面。

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