使用Javascript和CustomValidator验证RadioButton列表

Validate RadioButton List Using Javascript and CustomValidator

本文关键字：RadioButton 列表 验证 CustomValidator Javascript 使用      更新时间：2023-09-26

我正在为RadioButtonList使用CustomValidator，而不是RequiredFieldValidator，这样我就可以使用Javascript分配CSS类。验证是为了检查是否至少选择了其中一个项。foll。代码不起作用：

JS:

function validateRadioButtonList() {              
            var target = document.getElementById('<%=rbGender.ClientID %>');        
            var radioButtons = target.getElementsByTagName('input');
            var is_valid;
            if (radioButtons[0].checked || radioButtons[1].checked) {
                is_valid = true;
                target.className = "";
            }
            else {
                target.className = "validate";
                is_valid = false;
            }
            args.IsValid = is_valid;
        }

ASPX:

 <asp:RadioButtonList ID="rbGender" runat="server" RepeatDirection="Horizontal" 
  RepeatLayout="Flow" AutoPostBack="false">
  <asp:ListItem>Male&nbsp;&nbsp;</asp:ListItem>
  <asp:ListItem>Female&nbsp;&nbsp;</asp:ListItem>
 </asp:RadioButtonList>
 <asp:CustomValidator ID="CustomValidator3" runat="server" 
  ControlToValidate="rbGender" ClientValidationFunction="validateRadioButtonList"   
  Text="*" ForeColor="Red"> </asp:CustomValidator>
 <asp:Button ID="btnUpdate" runat="server" Text="Update" 
  ValidationGroup="vsGroup" />

生成的HTML:

<div class="">
 <span id="ContentPlaceHolder1_rbGender">
 <input id="ContentPlaceHolder1_rbGender_0" type="radio" 
  name="ctl00$ContentPlaceHolder1$rbGender" value="Male  " />
 <label for="ContentPlaceHolder1_rbGender_0">Male  </label>
 <input id="ContentPlaceHolder1_rbGender_1" type="radio" 
  name="ctl00$ContentPlaceHolder1$rbGender" value="Female  " />
 <label for="ContentPlaceHolder1_rbGender_1">Female  </label>
 </span>
 <span style="float: right; margin-right: 3%">
 <span id="ContentPlaceHolder1_CustomValidator3" style="color:Red;
  visibility:hidden;">*  </span>
 </span>
</div>

但如果我包括

UseSubmitBehavior="False" OnClientClick="validateRadioButtonList()"

对于按钮，它是有效的。我不想这么做。

在没有ASP验证器的情况下尝试它。只需使用JavaScript就可以解决。请尝试此链接以获取参考：http://www.felgall.com/javatip2.htm

问题如下：

var target = document.getElementById(sender.controltovalidate);

它将找到无线电组。每个无线电都应该有自己的ID，因为JS中的ID是唯一的。因此，您不能仅使用返回单个对象的getElementById来选择所有单选按钮。

你能给我看看控件生成的HTML吗？

编辑

类似（但如果您更改控件名称，这个名称也会更改，因为它是服务器生成的）。如果你能给它上课会更好。

var target = document.getElementsByName("ctl00$ContentPlaceHolder1$rbGender")
相关文章：