How to show validation summary on change event or any other event when it required.


What leads me to develop the validation summary control?

Last week it was very much pain for me to manage the validation summary of application input forms. Normally in ASP.Net the validation summary fires on form submit. but our client requirement was to fire the validation summary on any input change by user.

To meet the client requirement I look for jquery validation plugins and some other but the plugins that I found doesn’t meet my client requirement. Then I decide to make a validation summary control from scratch but It seemed to me that it will be very tricky to implement it from scratch and to support for all the browsers. So I came up with a solution to build a validation control by mixing with ASP.Net existing validation controls and Jquery. So the validation of data will be done by validation control and I will just manage it to show whenever it requires. So my work now reduces to only doing show hides of the validations.

Introduction :  The control works for showing validation summary whenever it requires. It’s build by mixing up ASP.Net validation control and Jquery. I will point some of the flexibilities and features of the control below:

Ø      As its build with ASP.Net validation control, so the validation is done by ASP.Net validation control, as a result it will be painless to validate the data and  will be compatible with the browsers to which ASP.Net validation controls are compatible with.

Ø      It’s very much flexible to validate data whenever needed. The summary can be updated on any event it required. Obviously on form submit, onchange and any other event.

Ø      The style of the validation summary can be controlled by changing the CSS.

Prerequisites and Limitation: The limitation is it’s only useable in asp.net application. And a prerequisite is it requires jquery.

The code to use the validation control:

Download the required files from here validation summary.

And also download the jquery file from jquery site.

Add the following reference to the page where want to use the validation summary (the path can be different depending on how the downloaded folder is placed):

<script type=”text/javascript” src=”JQuery/jquery-1.4.1-vsdoc.js”></script>

<script type=”text/javascript” src=”ValidationSummary/ValidationSummary.js” />

<link rel=”Stylesheet” href=”ValidationSummary/ValidationSummary.css” />

Then add the validation control code as below:

<div id=”divValidationSummary”>

<asp:Label ID=”lblErrorSummaryHeader” runat=”server” Text=”Please resolve the following errors to proceed :”

CssClass=”hideValidationError”>

</asp:Label>

<ul>

<asp:RequiredFieldValidator ID=”rv1″

runat=”server” ControlToValidate=”txt1″>

<li>Error message</li>

</asp:RequiredFieldValidator>

<asp:RequiredFieldValidator ID=”rv2″

runat=”server” ControlToValidate=”txt2″>

<li>Error message</li>

</asp:RequiredFieldValidator>

……………………………..

……………………………..

……………………………..

……………………………..

……………………………..

<asp:RequiredFieldValidator ID=”rvn”

runat=”server” ControlToValidate=”txtn”>

<li>Error message</li>

</asp:RequiredFieldValidator>

</ul>

</div>

Here the RequiredFieldValidator controls ControlToValidate property will contain the controls Id whose validation message have to shown in the validation summary. And the ‘Error message’ is the error message that would be shown.

Here only RequiredFieldValidator is shown, its possible to add any other validation including regular expression validation and others.

Validation summary control in Action:

 The section is intended to show practical use of the validation summary control.

Form to validate

Form to validate

The use of validation summary control to validate the above form is given below:

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; >

<head runat=”server”>

<title></title>

<script type=”text/javascript” src=”JQuery/jquery-1.4.1-vsdoc.js”></script>

<script type=”text/javascript” src=”ValidationSummary/ValidationSummary.js” />

<link rel=”Stylesheet” href=”ValidationSummary/ValidationSummary.css” />

<script type=”text/javascript”>

$(document).ready(function () {

var lblErrorSummaryHeaderClientID = ‘<%= lblErrorSummaryHeader.ClientID %>’;

$(“input[type=text]”).change(function () {

validation(lblErrorSummaryHeaderClientID);

});

$(‘#<%=btnSubmit.ClientID %>’).click(function () {

return validation(lblErrorSummaryHeaderClientID);

});

});

</script>

<style type=”text/css”>

</style>

</head>

<body>

<form id=”form1″ runat=”server”>

<div id=”divValidationSummary”>

<asp:Label ID=”lblErrorSummaryHeader” runat=”server” Text=”Please   resolve the following errors to proceed :” CssClass=”hideValidationError”>

</asp:Label>

<ul>

<asp:RequiredFieldValidator ID=”rv2FirstName”

runat=”server” ControlToValidate=”txtFirstName”>

<li>Enter First Name</li>

</asp:RequiredFieldValidator>

<asp:RequiredFieldValidator ID=”rv2LastName”

runat=”server” ControlToValidate=”txtLastName”>

<li>Enter Last Name</li>

</asp:RequiredFieldValidator>

<asp:RequiredFieldValidator ID=”rv2Address”

runat=”server” ControlToValidate=”txtAddress”>

<li>Enter Address</li>

</asp:RequiredFieldValidator>

</ul>

</div>

<div>

<table>

<tr>

<td>

First Name

</td>

<td style=”width:5px”></td>

<td>

<asp:TextBox ID=”txtFirstName” runat=”server”></asp:TextBox></td>

<td>

<asp:RequiredFieldValidator ID=”rv1FirstName” runat=”server” ControlToValidate=”txtFirstName”>*

</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td style=”height:5px” colspan=”4″></td>

</tr>

<tr>

<td>

Last Name

</td>

<td style=”width:5px”></td>

<td>

<asp:TextBox ID=”txtLastName” runat=”server”></asp:TextBox>

</td>

<td>

<asp:RequiredFieldValidator ID=”rv1LastName” runat=”server”    ControlToValidate=”txtLastName”>*

</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td style=”height:5px” colspan=”4″>

</td>

</tr>

<tr>

<td>

Address

</td>

<td style=”width:5px”></td>

<td><asp:TextBox ID=”txtAddress” runat=”server”></asp:TextBox></td>

<td>

<asp:RequiredFieldValidator ID=”rv1Address”

runat=”server” ControlToValidate=”txtAddress”>*

</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td colspan=”2″>

&nbsp;

</td>

<td colspan=”2″>

<asp:Button runat=”server” ID=”btnSubmit” Text=”Submit” />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Using the above code the form validation summary will be updated on every change in the text boxes and clicking on the submit button.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: