Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / ASP.NET

JavaScript for ASP.NET Validation Controls

3.44/5 (6 votes)
15 Nov 2011CPOL 40.1K  
ASP.NET comes with built-in validations controls to perform validations. Now by using the client-side API, we can validate the controls without postback.

The Page_ClientValidate(val) method and the Page_IsValid property are used for this task as shown below:


JavaScript
function performCheck()
{
    Page_ClientValidate("DemoValidate");
    if (Page_IsValid)
    {
       alert('Form Submitted Successfully');
       return true;
    }
    else
    {
        alert('Please Correct The errors');
        return false;
     }
}

The above function can be called on page submission as shown below:


ASP.NET
<asp:Button ID="btnSubmit" runat="server" Text="Submit" 
    ValidationGroup="DemoValidate" OnClientClick ="performCheck()" />

Note: The ValidationGroup property should be the same for all the validation controls across the group which need to be validated.





Complete Source Code:
XML
<h2>Client Side Validation Demo:</h2>
<script type ="text/javascript">
function performCheck()
{
    Page_ClientValidate("DemoValidate");
    if (Page_IsValid)
    {
        alert('Form Submitted Succesfully');
        return true;
    }
    else
    {
        alert('Please Correct The errors');
        return false;
    }
}
</script>
<table>
<tr>
<td>EmployeeName:</td>
<td>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
<td>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please Enter Employee Name" ValidationGroup="DemoValidate" ControlToValidate="TextBox1">*</asp:RequiredFieldValidator>
</td>

</tr>
<tr>
<td>EmployeeID:</td>
<td>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
 <td>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Employee ID Cannot be Blank" ValidationGroup="DemoValidate" ControlToValidate="TextBox2">*</asp:RequiredFieldValidator>
     <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage='"Please Enter 4-digit Employee ID' MaximumValue="4" MinimumValue="1" ValidationGroup="DemoValidate" ControlToValidate="TextBox2">*</asp:RangeValidator>
</td>
</tr>
<tr>
<td>EmailID:</td>
<td>
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td>
<td>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Please Enter Valid Email ID" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="DemoValidate" ControlToValidate="TextBox3">*</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>Phoneno:</td>
<td>
    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td>
<td>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ErrorMessage="Phone no u have entered is not valid" ValidationExpression="\d{10}" ValidationGroup="DemoValidate" ControlToValidate="TextBox4">*</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="DemoValidate" OnClientClick ="performCheck()" />
</td>
</tr>
</table>
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="DemoValidate" />

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)