Click here to Skip to main content
15,860,861 members
Articles / Web Development / ASP.NET

Client Side Validation Running Server Side Code

Rate me:
Please Sign up or sign in to vote.
4.63/5 (13 votes)
26 Jul 2008CPOL5 min read 109.9K   480   47   31
The article explains how to easily run server-side validation methods on the client-side

Introduction

Form validation is one of the basics of .NET web development. ASP.NET comes with several default validators, and a CustomValidator for any other kind of validation.

As you know, the CustomValidator allows us to implement server-side and client-side validation, which will make it functional, and user-friendly at the same time. But some validation cannot be simply done on the client side, and can only be implemented on the server side. For example, checking if an e-mail exists in the database during a user registration.

I decided to find a way around it, and make my validation more friendly and responsive.

Background

After some research, and a bit of Googling, I realised that there aren't many simple solutions out there. The basic idea looked like this: use a custom validator, and make its client-side validation function run a .NET WebMethod in code behind. Sounds simple in theory, but the ones who tried to implement this faced an obstacle: running web methods from JavaScript is done asynchronously. Ouch...

There were several solutions/tests I found online:

  • Run the async WebMethod, and cycle in a loop until you get your result. The drawback - 100% CPU usage until we get the result.
  • Rewrite the XMLHttpRequest method to run synchronously. The drawback - the code is quite massive, and we're looking for a simple solution.

I have found another article, that also did the job. The author ran the validation asynchronously, and provided the OnSuccess method. When the validation result came, he refreshed the validator. The solution sounds very good, but it was still too bulky, and provided a number of things that I thought were unnecessary. But that was a good start, so I decided to implement a similar solution, but quite more elegant and simple.

Implementation

The idea is simple. We create a custom validator, and in the client validation run the WebMethod in the code behind, providing the OnSuccess method. When the result comes in, the OnSuccess method will set the validation result in the validator's issuccess property, and refresh the validator.

Thankfully, the .NET Framework has a JavaScript method to refresh a validator: ValidatorUpdateDisplay() that receives a validator id as a parameter. For each validator, we get 2 JS methods: A client validation, and an OnSuccess method. The reason for this is that each OnSuccess method will have to update a different validator.

Finally, when everything was finished, I wrapped it up in a validator control. The control derives from CustomValidator, so it has all its functionality, but instead of the standard client validation, it will allow running page WebMethods.

The user control has 2 new properties, compared to CustomValidator: AsyncWebMethod and AsyncWebMethodRunCondition. The first one will hold the name of the page web method, that will validate the input. The validation WebMethod is a method with a single string parameter (the value to be validated) that returns a boolean (IsValid). It also has to be defined with a System.Web.Services.WebMethodAttribute.

For example, this is a method that was validating a user e-mail for duplicates in the database:

C#
[WebMethod]
public static Boolean ValidateEmail(String Email)
{
    return !UserComponent.EmailExists(Email);
}

The second parameter was introduced a bit later, and is essentially optional. It can contain a JavaScript boolean condition that will check if we need to validate the value. For example, when changing user details, if the user has not changed the value of the e-mail field, there is no need to make a request to the server to validate the field.

Note: Because this control uses PageMethods, a ScriptManager has to be present on the page, and its EnablePageMethods property has to be set to true. If this is not the case, the control will throw an exception during page load.

Using the Code

To demonstrate the use of this control, I have created a simple page, and monitored it in Firefox using Firebug. The page contains two textboxes and two validators, as follows:

ASP.NET
<asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true" />

<asp:TextBox ID="txbValidateMe" runat="server" />
<uc:AsyncCustomValidator ID="acvValidateMe" runat="server" 
			ControlToValidate="txbValidateMe"
    AsyncWebMethod="Validation1">Value is not capitalised</uc:AsyncCustomValidator>

<hr />

<asp:TextBox ID="txbValidateMe2" runat="server" />iAmValid will still be accepted
<uc:AsyncCustomValidator ID="acvValidateMe2" runat="server" 
			ControlToValidate="txbValidateMe2"
    AsyncWebMethod="Validation1" AsyncWebMethodRunCondition="args.Value != 'iAmValid'">
    Value is not capitalised</uc:AsyncCustomValidator>

The first text box will always be validated using the Validation1 Page WebMethod. The second one will only be validated when its value is different from "iAmValid".

The validation itself will check if the value entered is capitalized:

C#
[WebMethod]
public static Boolean Validation1(String value)
{
    return (value.ToUpper()[0] == value[0]);
}

It is a very simple example, and I have only used it here to show the control. :)

Demo

The advantage of this control is that the requests it makes are very lightweight, compared to AJAX callbacks, because it uses small JSON requests. When the value has to be validated, the script makes a request to the server, and the only data that is actually sent is the serialized value of the textbox:

val1.jpg

The response from the server is also very lightweight:

val2.jpg

val3.jpg

In the case of the second validator, you can see that when the value is different from "iAmValid" the script does a request to the server, but in case when AsyncWebMethodRunCondition is evaluated to false, there is no request to the server whatsoever:

val4.jpg

val5.jpg

Alternative

After writing this article, I have been pointed to a different approach to solve the problem. With the help of jQuery, you can use the .NET custom validator to run the same page method, and return the result asynchronously. What you have to do is point your custom validator to the following JS function:

JavaScript
function JQueryTestJS(source, args)
{
    $.ajax({
       type: "POST",
       async: false,
       timeout: 500,
       contentType: "application/json",
       dataType: "json",
       url: "Page.aspx/JQueryTest",
       data: '{"Value":"'+args.Value+'"}',
       success: function(result){
         args.IsValid = result.d;
       }
     });
}

In this example, you'll need a page web method called JQueryTest, with a single parameter, called Value, returning a boolean.

Points of Interest

Even with a lack of knowledge in JavaScript, I was able to make a simple but useful control just by doing a little research, and by forcing myself forward. A big amount of trial and error approach was used. ;)

This article proves once again that simple solutions are sometimes better than the complicated ones.

History

  • 29/06/08, v1.0 - Initial release

License

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


Written By
Software Developer
United Kingdom United Kingdom
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionClient-side validation Pin
kinjal` prajapati4-Apr-13 20:29
kinjal` prajapati4-Apr-13 20:29 
QuestionAjax control toolkit - ValidatorCalloutExtender - not work Pin
steeve.gauvreau3-Aug-11 4:04
steeve.gauvreau3-Aug-11 4:04 
GeneralMaking it Synchronous Pin
Greg Olmstead1-May-09 15:03
Greg Olmstead1-May-09 15:03 
GeneralRe: Making it Synchronous Pin
Artiom Chilaru4-May-09 0:24
Artiom Chilaru4-May-09 0:24 
QuestionJust one problem Pin
desertfoxaz30-Apr-09 5:31
desertfoxaz30-Apr-09 5:31 
GeneralRe: Just one problem Pin
desertfoxaz30-Apr-09 6:54
desertfoxaz30-Apr-09 6:54 
AnswerRe: Just one problem Pin
Member 218492524-Nov-09 4:19
Member 218492524-Nov-09 4:19 
AnswerDoes not work with cookieless sessions + Fix! Pin
Greg Olmstead3-Mar-09 8:00
Greg Olmstead3-Mar-09 8:00 
GeneralRe: Does not work with cookieless sessions + Fix! Pin
Artiom Chilaru4-Mar-09 23:40
Artiom Chilaru4-Mar-09 23:40 
Questionhow do you register the custom validator? Pin
Ethan Quirt30-Dec-08 3:52
Ethan Quirt30-Dec-08 3:52 
GeneralAppreciated! Pin
Yankee Imperialist Dog!9-Nov-08 14:01
Yankee Imperialist Dog!9-Nov-08 14:01 
GeneralGreat Article, but ... Pin
OzLand3-Nov-08 0:38
OzLand3-Nov-08 0:38 
GeneralRe: Great Article, but ... Pin
Artiom Chilaru3-Nov-08 0:58
Artiom Chilaru3-Nov-08 0:58 
GeneralRe: Great Article, but ... Pin
OzLand3-Nov-08 2:35
OzLand3-Nov-08 2:35 
GeneralGood one!!! Pin
seee sharp13-Aug-08 6:32
seee sharp13-Aug-08 6:32 
QuestionSubmit still possible... Pin
maximefs24-Jul-08 5:17
maximefs24-Jul-08 5:17 
AnswerRe: Submit still possible... Pin
Artiom Chilaru24-Jul-08 6:53
Artiom Chilaru24-Jul-08 6:53 
GeneralRe: Submit still possible... Pin
maximefs24-Jul-08 7:03
maximefs24-Jul-08 7:03 
GeneralRe: Submit still possible... Pin
Artiom Chilaru24-Jul-08 11:45
Artiom Chilaru24-Jul-08 11:45 
GeneralGood article. Pin
Rajib Ahmed1-Jul-08 18:57
Rajib Ahmed1-Jul-08 18:57 
GeneralRe: Good article. Pin
Artiom Chilaru1-Jul-08 20:26
Artiom Chilaru1-Jul-08 20:26 
GeneralAnother approach... Pin
MR_SAM_PIPER1-Jul-08 14:28
MR_SAM_PIPER1-Jul-08 14:28 
GeneralRe: Another approach... Pin
Artiom Chilaru1-Jul-08 16:13
Artiom Chilaru1-Jul-08 16:13 
GeneralRe: Another approach... Pin
Artiom Chilaru24-Jul-08 12:19
Artiom Chilaru24-Jul-08 12:19 
GeneralRe: Another approach... Pin
conspire4829-Dec-08 5:05
conspire4829-Dec-08 5:05 

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.