Click here to Skip to main content
Click here to Skip to main content

Client Side Validation Running Server Side Code

, 26 Jul 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
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:

[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: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:

[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. Smile | :)

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:

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. Wink | ;)

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)

Share

About the Author

Artiom Chilaru
Software Developer
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
QuestionClient-side validation Pinmemberkinjal` prajapati4-Apr-13 21:29 
QuestionAjax control toolkit - ValidatorCalloutExtender - not work Pinmembersteeve.gauvreau3-Aug-11 5:04 
GeneralMaking it Synchronous PinmemberGreg Olmstead1-May-09 16:03 
GeneralRe: Making it Synchronous PinmemberArtiom Chilaru4-May-09 1:24 
QuestionJust one problem Pinmemberdesertfoxaz30-Apr-09 6:31 
GeneralRe: Just one problem Pinmemberdesertfoxaz30-Apr-09 7:54 
AnswerRe: Just one problem PinmemberMember 218492524-Nov-09 5:19 
AnswerDoes not work with cookieless sessions + Fix! Pinmembermaynardflies3-Mar-09 9:00 
GeneralRe: Does not work with cookieless sessions + Fix! PinmemberArtiom Chilaru5-Mar-09 0:40 
Questionhow do you register the custom validator? PinmemberEthan Quirt30-Dec-08 4:52 
How do you make it so that this can be consumed? Do you put AsyncCustomValidator.cs within the App_Code folder? Where is the "uc" tag defined?
GeneralAppreciated! Pinmemberwebbuilder9-Nov-08 15:01 
GeneralGreat Article, but ... PinmemberOzLand3-Nov-08 1:38 
GeneralRe: Great Article, but ... PinmemberArtiom Chilaru3-Nov-08 1:58 
GeneralRe: Great Article, but ... PinmemberOzLand3-Nov-08 3:35 
QuestionSubmit still possible... Pinmembermaximefs24-Jul-08 6:17 
AnswerRe: Submit still possible... PinmemberArtiom Chilaru24-Jul-08 7:53 
GeneralRe: Submit still possible... Pinmembermaximefs24-Jul-08 8:03 
GeneralRe: Submit still possible... PinmemberArtiom Chilaru24-Jul-08 12:45 
GeneralGood article. PinmemberRajib Ahmed1-Jul-08 19:57 
GeneralRe: Good article. PinmemberArtiom Chilaru1-Jul-08 21:26 
GeneralAnother approach... PinmemberMR_SAM_PIPER1-Jul-08 15:28 
GeneralRe: Another approach... PinmemberArtiom Chilaru1-Jul-08 17:13 
GeneralRe: Another approach... PinmemberArtiom Chilaru24-Jul-08 13:19 
GeneralRe: Another approach... Pinmemberconspire4829-Dec-08 6:05 
QuestionIs it still Async? PinmemberMark Gendein1-Jul-08 6:52 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 26 Jul 2008
Article Copyright 2008 by Artiom Chilaru
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid