使用javascript验证asp.net中的radiobuttonlist

Question

我必须使用 javascript 验证单选按钮。如果没有选择任何选项，它应该显示一条消息。

我的单选按钮代码是：

<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
    <asp:ListItem></asp:ListItem>
    <asp:ListItem></asp:ListItem>
    </asp:RadioButtonList>

提交按钮是：

<asp:Button ID="next2" runat="server" Text=">>" Width="46px" 
        OnClientClick="return next2()"/>

对应的javascript函数是：

        function next2() {

        var listItemArray = document.getElementById('<%=welldata.ClientID %>');
        var isItemChecked = false;
        var length1 = listItemArray.length;

        for (var i=0; i<length1; i++)
          {
              var listItem = listItemArray[i];
              document.write(listItem);

             if ( listItem.checked )
                 {
               alert(listItem.value);
               isItemChecked = true;
                 }
           }

            if ( isItemChecked == false )
              {
              alert('Nothing is checked for welldata!');

              return false;
                 }

             return true;
    }

在调试时我注意到该函数已执行但未进入 for 循环。 我也试过了

        document.write(isItemChecked);
        document.write(listItemArray);
        document.write(length1);

输出是：

false [对象 HTMLTableElement] 未定义

Answer 1

wellDataRadioButtonListASP.NET 服务器控件将在浏览器中呈现为一个表格，其下有许多input type="radio" 控件，每个控件都具有相同的name。

所以，你需要先获取table标签内的input标签：

var wellData = document.getElementById('<%=welldata.ClientID %>');
var listItemArray = wellData.getElementsByTagName('input');

当然，如果您出于某种奇怪的原因手动执行此操作。您可以使用RequiredFieldValidator 控件自动执行此操作。

<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
    <asp:ListItem></asp:ListItem>
    <asp:ListItem></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="rfvWellData" runat="server" ControlToValidate="wellData" Display="Dynamic" ErrorMessage="Pick yourself some well data" />

Answer 2

您正在使用默认情况下呈现为表格的 RadiobuttonList。如果您通过 id document.getElementById('<%=welldata.ClientID %>') 选择 dom 元素，那么您选择的是表格而不是 RadioButtonList。如果要选择单选按钮，则必须遍历 listItemArray 的子节点以获取单选按钮。或者，您可以使用 jquery 选择单选按钮，因为它们的 id 将以单选按钮列表的 id 开头（它们看起来像 welldata_0 或 welldata_1）。

这行 jquery 代码将获取您的单选按钮

var listItemArray = $("input[id^='welldata']")

Answer 3

试试这个：

function next2() {

        if(document.getElementById('<%=welldata.ClientID %>').checked==false)
{
alert('Nothing is checked for welldata!');
return false;
}
return true;
}
                   or 

使用RequiredFieldValidator

<asp:RequiredFieldValidator   
            ID="ReqiredFieldValidator1"  
            runat="server"  
            ControlToValidate="welldata"  
            ErrorMessage="Select your welldata!"  
            >  

查看以下链接

http://asp-net-example.blogspot.in/2009/02/aspnet-requiredfieldvalidator-example.html

http://www.itechies.net/tutorials/jscript/jsexample.php-pid-jform.htm#rb

http://www.codeproject.com/Questions/499602/RequiredplusFieldplusValidatorplusForplusRadioplus

Answer 4

var rblItems = document.getElementById('<%=radioBtnListId.ClientID %>').getElementsByTagName('input');

var checkedItems = true;
for (var i = 0; i < rblItems.length; i++) {
    if (rblItems[i].checked) {
        checkedItems = true;
        break;
    }
    else {
        checkedItems = false;
    }
}

if (!checkedItems) {//Hence No items checked
   alert("Nothing is checked");
   return false; 
}