Click here to Skip to main content
15,867,568 members
Articles / Web Development / ASP.NET
Tip/Trick

JavaScript for ASP.NET Validation Controls

Rate me:
Please Sign up or sign in to vote.
3.44/5 (6 votes)
14 Nov 2011CPOL 38.4K   5   9
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)


Written By
Software Developer Collabera
Singapore Singapore
S V Sai Chandra is a Software Engineer from Hyderabad Deccan. He started Embedded Programing in his college days and now he is a Web Developer by Profession. He Loves coding and his passion has always been towards Microsoft Technologies. Apart from coding his other hobbies include reading books, painting and hang out with friends is his most favorite past time hobby.
He blogs at
http://technowallet.blogspot.com
Technical Skills:
C#,Ado.Net,Asp.Net,Sql Server,JavaScript,XML,Web services.

Comments and Discussions

 
GeneralMy vote of 3 Pin
Donsw31-Mar-13 6:35
Donsw31-Mar-13 6:35 
GeneralReason for my vote of 1 validation without postback is a sec... Pin
trooper081422-Nov-11 7:12
trooper081422-Nov-11 7:12 
GeneralReason for my vote of 5 thanks usefull tip Pin
Jagz W21-Nov-11 17:59
professionalJagz W21-Nov-11 17:59 
GeneralCould You please provide full source code for this example? ... Pin
Alexander Voronin14-Nov-11 22:47
Alexander Voronin14-Nov-11 22:47 
QuestionValidation Controls. Pin
AmirHashemZadeh25-Nov-11 3:12
professionalAmirHashemZadeh25-Nov-11 3:12 
AnswerRe: Validation Controls. Pin
S V Saichandra25-Nov-11 3:14
professionalS V Saichandra25-Nov-11 3:14 
AnswerRe: Validation Controls. Pin
S V Saichandra25-Nov-11 4:42
professionalS V Saichandra25-Nov-11 4:42 
GeneralRe: Validation Controls. Pin
AmirHashemZadeh25-Nov-11 5:36
professionalAmirHashemZadeh25-Nov-11 5:36 
GeneralRe: Validation Controls. Pin
S V Saichandra25-Nov-11 15:04
professionalS V Saichandra25-Nov-11 15:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.