How to validate textbox with <asp:RadioButtonList>?

Question

I want radiobutton list to validate 8 textbox,There are two thing i want to do in selecting a radio button.

1.I have two textbox with startdate and enddate if its blank on clicking the radio button it should alert "it cannot be blank"

2.i have another two text with same as above ,here it has to validate the above textbox and also itself if it is blankit should alert it.its same for other 4 textbox

Radiobutton list
    <asp:RadioButtonList ID="rbtLstRating" runat="server" OnClick="return  checked()"
            RepeatDirection="Vertical" RepeatLayout="Table" Height="255px" Width="95px"  >
            <asp:ListItem Text="one" Value="one"></asp:ListItem>
            <asp:ListItem Text="two" Value="two"></asp:ListItem>
            <asp:ListItem Text="three" Value="three"></asp:ListItem>
            <asp:ListItem Text="four" Value="four"></asp:ListItem>
               </asp:RadioButtonList>            

This what i tried in javascript for first two textbox but it not working.

 function checked() {
        var radio = document.getElementById("rbtLstRating")
        var cal1 = document.getElementById('<%=textstqo.ClientId%>').value;
        var cal2 = document.getElementById('<%=textedqo.ClientId%>').value;
         if (radio.checked) {
                if (cal1 == '' && cal2 == '') {
                    alert("it cannot be blank");
                    return false
                }

                else {
                    alert("it has been enabled");
                    return true;
                }

            }
        }

Textbox

          <td >
            <asp:Label ID="Labstart" runat="server" Text="Start Date"></asp:Label>
            </td>
            <td>
            <asp:TextBox ID="textstqo"  runat="server" ></asp:TextBox>
             <td >
            <asp:Label ID="Label3" runat="server" Text="End Date"></asp:Label>
            </td>
            <td>
            <asp:TextBox ID="textedqo"  runat="server"  ></asp:TextBox>
             </tr>
        </table>
        </div>

        <div style="margin-top:30px">  

         <table>
            <tr>
            <td >
            <asp:Label ID="Label4" runat="server" Text="Start Date"></asp:Label>
            </td>

            <td>
            <asp:TextBox ID="txtstartdateqt"  runat="server" ></asp:TextBox>
              </td>
            <td >
            <asp:Label ID="Label5" runat="server" Text="EndDate"></asp:Label>
            </td>
            <td>
            <asp:TextBox ID="txtenddateqt"  runat="server" ></asp:TextBox>
                </tr>
                </table>
                </div>
                <div style="margin-top:30px">  
            <table>
            <tr>
            <td >
            <asp:Label ID="Label7" runat="server" Text="Start Date"></asp:Label>
            </td>
            <td>
            <asp:TextBox ID="txtstardateqre"  runat="server" ></asp:TextBox>
        </td>
         <td >
            <asp:Label ID="Label8" runat="server" Text="EndDate"></asp:Label>
            </td>
            <td>
            <asp:TextBox ID="txtenddateqre"  runat="server" ></asp:TextBox>
           </td>
           </tr>
            </table>
             </div>
             <div style="margin-top:30px">  
            <table>
            <tr>

            <td >
            <asp:Label ID="Label10" runat="server" Text="Start Date"></asp:Label>
            </td>

            <td>
            <asp:TextBox ID="txtstartdateqf" class="MyTestClass" runat="server" ></asp:TextBox>
                                 </td>

            <td >
            <asp:Label ID="Label11" runat="server" Text="End Date"></asp:Label>
            </td>


            <td>
            <asp:TextBox ID="textenddatef" class="MyTestClass" runat="server" ></asp:TextBox>

can you help it may be in javascript or in vb.net .thanks in advance

Answer 1

Try this. i think this what you are looking for.

<input type="radio" name = "box" id ="box1">
<input type="radio" name = "box" id ="box2">
<input type="text" name = "text" id ="text1">
<input type="text" name = "text" id ="text2">
<input type="text" name = "text" id ="text3">
<input type="text" name = "text" id ="text4">

$('input[type="radio"]').click(function(){
    var _this = $(this).attr("id");
    var count = 0;
    if ($(this).is(':checked'))
    {
        $('input[type="text"]').each(function(){
            count++;
            if(_this === "box1" && count <=2) {
                if($(this).val() === "") {
                    alert("it cannot be blank");
                    return false;
                }
            } else if (_this === "box2" && count <=4) {
                if($(this).val() === "") {
                    alert("it cannot be blank");
                    return false;
                }   
            }
        });
    }
  });

Jsfiddle