Custom Validation AJAX Control Sample



 The ASP.NET Web Forms offer a collection of validation controls out of the

box to check the values in the fields of a form. The validation process takes
place in 2 situations:
 When the form data is sent back to the server a specific server-side
functionality of the control or the page is called.


 When the user changes the value of a field and leaves the field a specific
client-side function is called.
Now, with the help of AJAX and the possibility of asynchronous calls to the
server in the background a third kind of validation can be implemented
without great effort and combines the power of the server side processing with
the better user experience of the immediate verification in the client.
 When the user changes the value of a field and leaves the field a specific
WebService can check the value.
The implementation is straight forward. We use the built-in CustomValidator
control to attach a client side function:


<input autocomplete="off" id="EMAIL_IN" runat="server" name="EMAIL" />
<asp:CustomValidator ID="CustomValidator1" runat="server"
ControlToValidate="EMAIL_IN"
ErrorMessage="Please enter a valid e-mail address."
ClientValidationFunction="validateEMail">*</asp:CustomValidator>


The client-side validation function that is used by the control as specified by
the ClientValidationFunction attribute always leaves the arguments.isvalid
flag set on true (default) to hide any shown error and then start the Ajax action
with the source object as parameter.


function validateEMail(source, arguments) {
ajax.Start(validateAction, source);
} // validateEMail


The AJAX action needs to be declared and is based on some implementation
details of the client-side validation mechanism:


var validateAction = {
delay: 0,
prepare: function (source) {
// from the Validator Common JavaScript
return(ValidatorGetValue(source.controltovalidate));
},
call: proxies.ValidatorDemo.ValidateEMail,
finish: function (val, source) {
// from the Validator Common JavaScript
source.isvalid = val;
if (! val)
Page_IsValid = false;
ValidatorUpdateDisplay(source);
ValidationSummaryOnSubmit(null);
},
onException: proxies.alertException
} // validateAction


There is nothing data-verification specific here except the link to the
WebService we use to validate e-mail addresses so the declaration can be
reused for different purpose.
The integration of the Ajax action is a little bit tricky as you can see because
the validation process of the built-in validation controls of ASP.NET do not
expect any asynchronous processing but wants an immediate decision to be
taken and the Validation Summary sometimes does not update correctly.
The WebService itself can do what ever it wants to do. In my sample I use the
DNS class to resolve the domain name and check if it exists. That cannot be
done by the client and is a sample for the power you have on the server
available, but not on the client on its own.
http://www.mathertel.de/AjaxEngine/S03_AJAXControls/ValidatorDemo.aspx

Post a Comment

You're welcome to share your ideas with us in comments.

Previous Post Next Post