带有 jquery 表单验证的单选按钮列表答案

【问题标题】：radiobuttonlist with jquery form validation带有 jquery 表单验证的单选按钮列表
【发布时间】：2012-07-06 18:20:16
【问题描述】：

我有一个这样的单选按钮列表，我正在尝试将其设为必填字段并正在使用表单验证（jquery 验证插件）。

                 <asp:RadioButtonList ID="PlateType1" runat="server" CssClass="rbclass required">
                    <asp:ListItem>New</asp:ListItem>
                    <asp:ListItem>Renewal</asp:ListItem>
                 </asp:RadioButtonList>

显然，在幕后，asp.net 引擎生成了一个表格，因此表单验证插件不理解 CssClass 所需的功能。所以它从不验证我的列表，尽管我在提交时没有选择任何内容。如何重写以便可以使用 jquery 验证插件？

我的 rbclass 是

         .rbclass
           {
            float:left;
            display:block;

            }

在通过萤火虫检查元素时，这就是正在发生的事情。标签 class="error" 在单选按钮之后生成。我怎样才能控制它，让它在 New 之后。

             <td>
               <input id="MainContent_PlateType1_0" class="ui-wizard-content ui-helper-reset ui-state-default required error" type="radio" value="New" name="ctl00$MainContent$PlateType1">
               <label class="error" for="ctl00$MainContent$PlateType1" generated="true">This field is required.</label>
                <label for="MainContent_PlateType1_0">New</label>
             </td>

这是我更新的标记，它引用了生成的 id 名称

       <label for="PlateType1" class="rblabel">This plate is: <span class="required_field">*</span></label>
                 <asp:RadioButtonList ID="PlateType1" runat="server" CssClass="rbclass">
                    <asp:ListItem>New</asp:ListItem>
                    <asp:ListItem>Renewal</asp:ListItem>
                 </asp:RadioButtonList> 
                 <span>
                  <label class="error" for="ctl00$MainContent$PlateType1" >Please select either New or Renewal</label>
                  </span>

【问题讨论】：

您要验证什么？它只是验证至少选择了一个选项吗？
单选按钮是否被勾选

标签： jquery asp.net jquery-validate validation

【解决方案1】：

您可以在文档就绪处理程序上使用类似的东西

$("#<%= PlateType1.ClientID %> input").addClass("required");

或者如果你想把它放在一个外部的 js 文件中

$(".rbclass input").addClass("required");

【讨论】：

这种工作..不幸的是发生的错误消息此字段是必需的，将文本新建和更新推送到下一行。我想在文本 New 旁边显示错误消息。我可以对我的 rbclass 做些什么来防止这种情况发生吗？我在顶部添加了我的 rbclass
为什么要在“新建”旁边显示所需的消息？错误消息是针对单选按钮列表而不是针对每个单独的输入。也许我没有明白你的意思
我的意思是在单选按钮列表的右侧显示错误消息。它可以在新的或更新的旁边或介于两者之间。希望您明白这一点。
请粘贴单选按钮列表的真实html和所需的标签，以便我们在jsfiddle上玩一下
我终于能够使用 span 标签，然后使用标签在我想要的地方生成错误消息。我必须引用 asp.net 服务器控件生成的名称才能使其工作。我附上了我的代码。如果您知道避免使用 ctl$...name 的方法，请告诉我。感谢您迄今为止的帮助。

【解决方案2】：

试试这个：

  $(document).ready(function(){
    $('.rbclass input').addClass('required') // or $('#PlateType1')...
  })

【讨论】：

【解决方案3】：

在运行时为 Radiobuttonlist 添加一些属性（data-type = radio, data-required=1

然后下面的脚本 vil validate(multiple) radiobuttonlist

   function validateRadioBoxes() {
        var isValid = true;
        var radioButtonLists = $('table[data-type="radio"][data-required="1"]');
        radioButtonLists.each(function (key) {
            isValid = ($(this).find("input[type=radio]:checked").length>0);
            if (!isValid) {
                $(this).css({
                    "border": "1px solid red",
                    "background": "#FFCECE"
                });
            }
            else {
                $(this).css({
                    "border": "",
                    "background": ""
                });
            }
        });

【讨论】：

【解决方案4】：

ASP 代码：

<asp:RadioButtonList ID="rdbGender" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Value="Male">Male</asp:ListItem>
    <asp:ListItem Value="Female">Female</asp:ListItem>
</asp:RadioButtonList>

jQuery 代码：

if( $("#rdbGender input:radio:checked").val()==undefined)    
alert("Please Select Gender");

【讨论】：

在单独的 sn-ps 中格式化每个代码 sn-p 时，您的答案看起来会更好。