Custom Validators using Client Side JavaScript

In my latest project I am really enjoying using the Ajax Control Toolkit, particularly the ModalPopupExtender.

I've been using the popup panels to capture data, but I needed to validate the data that a user enters into certain fields. ASP.net's validators are the obvious choice, but when you have employed an AJAX control you need to validate the entry on the client's browser. This is easy to do using the ClientValidationFunction attribute of the validator.

<asp:TextBox ID="DiscountAmountTextBox" runat="server" Columns="10"></asp:TextBox>
<asp:CustomValidator id="DiscountAmountCustomValidator" 
        runat="server" 
        ControlToValidate="DiscountAmountTextBox" 
        ValidateEmptyText="true" 
        ClientValidationFunction="CheckDiscountAmount" 
        ErrorMessage="Please enter either an amount or a discount" 
        ToolTip="Please enter either an amount or a percentage">*</asp:CustomValidator>

then create a JavaScript function to do the validation. Here I have created a Regular Expression to validate decimals. Then simply set the args.IsValid property to either true or false and return.

var numericMatchexpression = /^(-)?(\d*)(\.?)(\d*)$/;

function CheckDiscountAmount(sender, args){
    
    if(args.Value != "" && GetElement(DiscountPercentageId).value != ""){
        args.IsValid = false;
        return;
    }
    
    var re = new RegExp(numericMatchexpression);
    
    if(!re.test(args.Value)){
        args.IsValid = false;
        return;
    }
    
    args.IsValid = true;
    return;
    
}

function GetElement(id){
    
    if(document.all){
        return document.all[id];
    }else {
        return document.getElementById(id);        
    }
    
}

In this example I have used the ScriptManager to write out a JavaScript variable (DiscountPercentageId) with the ClientID of the ASP.net TextBox I'm validating.

You'll also notice my GetElement function to handle the browser compatibility.

I hope this proves useful in your next AJAXian web application.