使用JavaScript在asp.net中验证radiobuttonlist

Question

i have to validate a radio button using javascript. it should show a message if none of the option is selected.

my radio button code is:

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

and the submit button is:

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

the corresponding javascript function is :

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

while debugging i noticed thaat function is executed but doesn't enter the for loop. also i tried

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

and the output was :

false [object HTMLTableElement] undefined

Answer 1

You are using a RadiobuttonList which is rendered as table per default. If you select the dom element by id document.getElementById('<%=welldata.ClientID %>') then you are selecting the table and not the RadioButtonList. If you want to select the radio buttons then you have to loop through the childNodes of listItemArray to get the radio buttons. Alternatively you could use jquery to select the radio buttons, as their ids will start with the id of your radio button list (they will look like welldata_0 or welldata_1 ).

This line of jquery code will get the your radio buttons

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

Answer 2

The wellData RadioButtonList ASP.NET server control will render in the browser as a table with a number of input type="radio" controls under it, each with the same name .

So, you need to get the input tags inside the table tag first:

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

This is, of course, if you are doing this manually for some odd reason. You can do it automatically with a RequiredFieldValidator control.

<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

Try this:

function next2() {

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

Use RequiredFieldValidator

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

Check these below links

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