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

在调试时，我注意到thaat函数已执行，但没有进入for循环。 我也尝试过

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

输出为：

假[object HTMLTableElement]未定义

Answer 1

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

这行jQuery代码将使您的单选按钮

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

Answer 2

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

因此，您需要先将input标签放入table标签中：

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