Enable or Disable Asp.net validation control using JavaScript

This article explains, how to enable or disable asp.net validation controls in JavaScript.

Enable or Disable Asp.net validation control using JavaScript

Asp.net provides pre defined validation controls. These controls validate the page data and allowed the user to submit the data to database or any storage media. Some scenarios we need to enable or disable the validation control based on the user inputs. The following method used to enable or disable the validation control using JavaScript.

Syntax: -
ValidatorEnable(ValidatorContronName,Boolean);

Here,
ValidatorContronName – This is ClientID of the Validation control.
Boolean - true(Enable) / false(Disable)
Look at the following example.

Write the following code on Default.aspx page


<body>
     <script language="javascript"  type="text/javascript">
	//This function enable or disable the validator based on the user 
	//marital status
      function EnableValidator()
      {
        if(document.getElementById('<%=rdoSingle.ClientID%>').checked)
        {
            document.getElementById('divName').style.display="none";
            ValidatorEnable(document.getElementById('<%=HWNameRequiredFieldValidator.ClientID%>'),false);
        }
        else
        {
            document.getElementById('divName').style.display="block";
            ValidatorEnable(document.getElementById('<%=HWNameRequiredFieldValidator.ClientID%>'),true);
        }
      }
      </script>  
    <form id="form1" runat="server">
    <div>
    <table cellpadding="0" cellspacing ="0">
        <tr>
            <td>Name</td>
            <td>
                <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="NameRequiredValidator" runat="server" 
                        ControlToValidate="txtName"
                    ErrorMessage="Name is required"></asp:RequiredFieldValidator>
                </td>
        </tr>
        <tr>
            <td>Marital Status</td>
            <td>
            <asp:RadioButton ID="rdoSingle" runat="server" onclick="EnableValidator();"
                 Text="Single" GroupName="maritalStatus"  />
            <asp:RadioButton ID="rdoMarried"  Checked ="true"  runat="server" onclick="EnableValidator();" Text="Married" GroupName="maritalStatus" />
                
            </td>
        </tr>
     </table>
        
        <div id="divName" >
            <table  cellpadding="0" cellspacing ="0">
            <tr>
                <td>
                    Husband/Wife Name</td>
                <td>
                    <asp:TextBox ID="txtHWName" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator  ControlToValidate="txtHWName"
                        ID="HWNameRequiredFieldValidator" runat="server" ErrorMessage="Husband or Wife name required"></asp:RequiredFieldValidator>
                    </td>
            </tr>
            </table>
        </div>
        
        <table cellpadding="0" cellspacing ="0">
            <tr>
                <td >
                </td>
                <td> <input type="submit"  id="btnSubmit" value="Submit" runat="server"/></td>
            </tr>
        </table>
    
    </div>
    </form>
 
</body>

And write the following code on Default.aspx.cs (codebehind)


    protected void Page_Load(object sender, EventArgs e)
    {
        Page.ClientScript.RegisterStartupScript(this.GetType(), "test", "<script language='javascript' type='text/javascript'>EnableValidator();</script>", false);
    }

Now run your application. The validator is enable when the user selects the married radio button. The validator is disabled when the user selects the single radio button.

Summary

I gave some idea about validators. I think, this will help to enable/disable validator using javascript.

Enable or Disable Asp.net validation control using JavaScript