CustomValidator textbox required on radiobuttonlist select

Question

On my page I have a Radio button list and a textbox.

The textbox is hidden by default then appears if the user clicks yes. Once they click yes then the textbox must be filled in before they can proceed.

I've put in the following code, however it doesn't seem to work at all and when the button is pressed to go to the next page it continues instead of stopping and asking the user to enter something in the box.

function Q12iYes() {           
        document.getElementById('txt12i').style.display = "block"
     }
    function Q12iNo() {
        document.getElementById('txt12i').style.display = "none"
    }      


<asp:RadioButtonList ID="rbtn12" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Value="Yes" onclick="Q12iYes()" /> <asp:ListItem Value="No"  Selected="True" onclick="Q12iNo()" /> 
    </asp:RadioButtonList>
            <br />

    12.i) If &#39;Yes&#39; please provide details<br />
    <br />
    <asp:TextBox ID="txt12i" runat="server" Height="62px" TextMode="MultiLine" Width="343px"></asp:TextBox>
            <br />                
            <asp:CustomValidator ID="MyTxtBoxValidator" runat="server" ControlToValidate="txt12i" ValidateEmptyText="true" ErrorMessage="Please enter some values into Textbox" 
            ClientValidationFunction="validateMyBtn"  Display="Dynamic"> </asp:CustomValidator>
              <script type="text/javascript">
                  function validateMyBtn(oSrc, args) {
                      var rbtnValue = null;
                      var rbtnList = document.getElementsByName('<%=rbtn12.ClientID %>');
                      var radio = rbtnList[0].getElementsByTagName("input");
                      for (var i = 0; i < radio.length; i++) { if (radio[i].checked) rbtnValue = radio[i].value; }
                      if (rbtnValue == "Yes") { args.IsValid = !(args.Value == "") }
                      else { args.IsValid = true; }
} 
</script> 

<asp:Button ID="btnContinue" runat="server" OnClick="btnContinue_Click" Text="Continue" /> 

I have had a look for how to do it, but nothing I have seen has worked either, or helped me understand where I'm going wrong.

Can anyone help?

Answer 1

A CustomValidator does not validate empty text by default, so set the ValidateEmptyText property:

<asp:CustomValidator  ValidateEmptyText="true" ID="MyTxtBoxValidator" runat="server" ...

Edit The problem was your javascript validation function which works only in IE. Here's a version that works also in other browsers:

function validateMyBtn(oSrc, args) {
      var rbtnList = document.getElementsByName('<%=rbtn12.ClientID %>');
      var noClicked = false;
      for (var x = 0; x < rbtnList.length; x++) {
          if (rbtnList[x].checked) {
              noClicked = rbtnList[x].value == "No";
              break;
          }
      }
      if (noClicked) 
          args.IsValid = true;
      else
          args.IsValid = args.Value.trim().length > 0;
}