Donnerstag, Oktober 13, 2005

CustomValidation 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 good 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 obvious.

1. 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>

2. 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

3. 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.

The sample can be found at http://www.mathertel.de/AjaxEngine/S03_AJAXControls/ValidatorDemo.aspx

1 Kommentar:

Vincent hat gesagt…

Well, this is a really helpfull piece of code. I only find one drawback: when you're working on a form element, that required you to scroll down the page a bit, upon getting the result back from the asynchronous validation, the page scrolls up.

I guess this is caused by the ValidatorUpdateDisplay or ValidationSummaryOnSubmit functions.

I'm delving into this myself to find out if there's a workaround for this.