ASP.NET/AJAX - Client-side validation with server validation controls

With web applications getting more and more complex, it becomes necessary to make them more per-formant. It is quite easy to create an ASP.NET web application and within little or no time, most of the logic exists on the server. This is all good and well for a simple application, but as complexity increases, we need to start handing process to the client where client-side operations need to exist.

One good example is validation. For example, there is no reason why we should have required field validation on the server (I.e. checking if a field exists in the code behind after submitting a form to the server). We can easily use a RequiredFieldValidator in this case, and this will be processed on the client-side.

Ok, now for more complex examples, and this is the main vocal point of this article... What if we are using a custom validator and we need to check if, for example; an email exists dynamically without submitting the whole form? The common thing developers do here is override the OnServerValidate property of a CustomValidator, then this will take care of things when the form is submitted. I am now going to discuss how we can avoid this....

The old method

- Requires whole page postback
- Less per-formant


The new method

- Partial page postback
- Asynchronous, can be performed on-the-fly (dynamically)


With the old method, you can see that we must submit the form to the server in order to use our server side validation method. Server side validation is useful if you wish to use a database for example (check if email exists), something that your Javascript cannot do alone.

With the new method, we override the ClientValidationFunction of the CustomValidator and set it to a javascript function. This javascript function then wraps up some data using JSON; this data refers to what we are validating (I.e. email address), then passes it to a WebMethod on the server. The server method will behave exactly like the previous OnServerValidate method previously, and pass back the results of our validation process. The CustomValidator will then use this to trigger an error if necessary.

I have attached the project files used in this example (written in ASP.NET 3.5). If you open the Javascript file, you can see that a page method is being referenced. You can also reference a service (.asmx) by uncommenting the line below in the script, and commenting out the page method reference. Both work exactly the same but present two alternate mechanisms.


Download the project files here



If the Web Service in different Namespace you can refer it before the class name this Main formula may help you :

NameSpaceName.ClassName.WebMethdName(Parameters , Success callback function, Error callback function);

Parameters: you can pass one or many parameters.

Success callback function :handles returned data from the service .

Error callback function :Any errors that occur when the Web Service is called will trigger in this function. Using Error Callback function is optional.


Note: In this example, I am using the $.ajax command of JQuery to call the WebMethod. So in the url section, we need to specify the method as a URL relative to where it's being called from.

I.e

+ javascript
--- callwebservice.js < the script calling the service
+ Services
--- service.asmx < the service being called


Then your url will be "../Services/service.asmx/NameOfTheWebMethod"