Programmer Dflying | Build Your Own Validators in ASP.NET Atlas

Build Your Own Validators in ASP.NET Atlas

Dflying | 06 April, 2006 20:08

Validators are a powerful way of checking the data entered by the user into ASP.NET Atlas client side controls of type InputControl, such as the Web.UI.TextBox control. If you are familiar with ASP.NET, you must know the validators provided by ASP.NET as server controls. Atlas validators provide the same behavior but runs totally on client side. There are a number of built-in validators:

requiredFieldValidator. Checks that data was entered.
typeValidator. Checks the type of the data, such as Number.
rangeValidator. Checks the input value between an upper and lower bound.
customValidator. Defines a custom expression handler.
regexValidator. Checks the data using a regular expression. The regular expression value must be delimited with "/" characters.

Validators are defined through a collection. When the propertyChanged event is raised, the control value is validated and the validate event raised. You can handle the validated event if you like. During validation, the validators are queried and might result in the client control's invalid and validationMessage properties being set.

A special control of type validationErrorLabel can be used to display the error message using a tooltip or an asterisk (*). Validators can also be grouped so that you can check validity for a group of controls as a unit.

Ok, I am not going to introduce how to use validators today. Let’s see how to build your own validators by the following IPAddressValidator demo, which is used to validate if the input is a valid IP Address.

Generally, there are two steps to build a custom validator:

Inherits form Sys.UI.Validator base class.
Implements the validate() method to validate the input value and returns a Boolean value which indicate whether input is valid.

Here’s the code for IPAddressValidator. Save it as IPAddressValidator.js.

Sys.UI.IPAddressValidator = function() {
    Sys.UI.IPAddressValidator.initializeBase(this);
 
    this.validate = function(value) {
        if (!value) {
            return false;
        }
        if (String.isInstanceOfType(value)) {
            if (value.length == 0) {
                return false;
            }
        }
        var ipPattern = /^(d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})$/;
        var ipArray = value.match(ipPattern);
 
        if (ipArray == null)
            return false;
 
        for (i = 0; i < 4; i++) {
            var thisSegment = ipArray[i];
            if (thisSegment > 255) {
                return false;
            }
        }
        return true;
    }
}
Sys.UI.IPAddressValidator.registerSealedClass('Sys.UI.IPAddressValidator', Sys.UI.Validator);
Sys.TypeDescriptor.addType('script', 'ipAddressValidator', Sys.UI.IPAddressValidator);

Let’s test our IPAddressValidator in a page. We add a text box for the IP Address input and a label for showing error message.

Here is the HTML definition in ASPX. Do not forget to add a reference to our IPAddressValidator.js in ScriptManager.

<atlas:ScriptManager runat="server" ID="ScriptManager1">
    <Scripts>
        <atlas:ScriptReference Path="IPAddressValidator.js" />
    </Scripts>
</atlas:ScriptManager> 
  
<div class="description">
    Please input an IP Address: 
    <input type="text" id="ipBox" class="input" />
    <span id="ipValidator" style="color: red">This IP Address is invalid!</span>
</div>

And here is the Atlas script.

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
    <components>
        <textBox id="ipBox">
            <validators>
                <ipAddressValidator errorMessage="This IP Address is invalid!" />
            </validators>
        </textBox>
        <validationErrorLabel id="ipValidator" associatedControl="ipBox" />
    </components>
</page>