Standard CustomValidator Textbox

• Download source - 57.5 KB

Introduction

Have you ever come across the hassle of having a number of textboxes on your UI, and an associated Regex Validator with each textbox?

The custom textbox described below eliminates the use of adding validators for each and every textbox. Just by setting a couple of properties, we can make our textbox validate credit card numbers, phone numbers, etc. If this is not enough, then the textbox provides a property to set your own custom validation. We can also specify whether a field is mandatory or not.

The textbox has inbuilt support for validation of:

1. Email - e.g. viv_cash@yahoo.com
2. PhoneNumber - e.g. xxx-xxx-xxxx
3. URL - e.g. http://www.google.com
4. CreditCard - It should be a 16 digit number
5. MonthYear - e.g. 08/2008
6. MonthDayYear - e.g. 12/06/2006
7. Time - e.g. 8:00 am, 12:20 pm
8. CustomExpression - Any other expression as per requirement

Background

There have been instances in my project when there are a number of textboxes on my form's UI and I need to put a custom validator for each. Then the idea of a textbox with standard/custom validations came to my mind. It eliminates the use of adding validators for each and every textbox added. The custom control is particularly useful when we have a number of textboxes on the UI and we need to have a validator for each. It's quick, saves time and is hassle free.

Using the Code

The code has a single class CustTextBox.The procedures and properties are explained below.

The ValidateValue enumeration defines all the items that are supported by the custom textbox and can be validated. Each and every item has an associated regular expression with it.

If some item is to be validated which is not included in the list, assign CustomExpression to the ValidateItem property. Then set ExpressionValue property to the regex (as string) which will validate the value in the textbox.

 Public Enum ValidateValue
            Email
            PhoneNumber
            URL
            CreditCard
            MonthYear
            MonthDayYear
            Time
            CustomExpression
        End Enum

ValidateItem property is of type ValidateValue (enum) and sets/returns a value indicating the item selected for validation.

IsRequired property is of type boolean and sets/returns a value indicating whether it is a mandatory field or not.

ExpressionValue property is of type string and sets/returns a value that is used for validating the value in the textbox if CustomExpression is used as ValidateItem. If ValidateItem is used as CustomExpression, then this property needs to be set mandatorily.

 Public Property ValidateItem() As ValidateValue
            Get
                Return _ValidateItem
            End Get
            Set(ByVal value As ValidateValue)
                _ValidateItem = value
            End Set
        End Property

        Public Property IsRequired() As Boolean
            Get
                Return _IsRequired
            End Get
            Set(ByVal value As Boolean)
                _IsRequired = value
            End Set
        End Property

        Public Property ExpressionValue() As String
            Get
                Return _ExpressionValue
            End Get
            Set(ByVal value As String)
                _ExpressionValue = value
            End Set
        End Property

In the oninit function, i.e. when the controls are initialized, attributes are added to the onblur event of all the custom textboxes on UI. Depending on the type of ValidateItem selected, a regex is assigned to the strRegExp variable.

 Protected Overrides Sub OnInit(ByVal e As System.EventArgs)
            Dim strRegExp As String = ""

            Select Case ValidateItem
                Case ValidateValue.Email
                    strRegExp = "^([\\w\\-\\.]+)@((%22file://[([0-9]%7b1,3%7d//%22">\\[([0-9]{1,3}\\.)_
                       {3}[0-9]{1,3}\\])|(([\\w\\-]+\\.)+)([a-zA-Z]{2,4}))$"
                Case ValidateValue.URL
                    strRegExp = "http(s)?://([\\w-]+\\.)+[\\w-]+(/[\\w- ./?%&=]*)?"
                Case ValidateValue.PhoneNumber
                    strRegExp = "((\\(\\d{3}\\) ?)|(\\d{3}-))?\\d{3}-\\d{4}"
                Case ValidateValue.CreditCard
                    strRegExp = "^(\\d{4}[- ]){3}\\d{4}|\\d{16}$"
                Case ValidateValue.MonthYear
                    strRegExp = "(((0[123456789]|10|11|12)([/])(([1][9][0-9][0-9])_
                                |([2][0-9][0-9][0-9]))))"
                Case ValidateValue.MonthDayYear
                    strRegExp = "^(([1-9])|(0[1-9])|(1[0-2]))\\/(([0-9])|_
                    ([0-2][0-9])|(3[0-1]))\\/(([0-9][0-9])|([1-2][0,9][0-9][0-9]))$"
                Case ValidateValue.Time
                    strRegExp = "^ *(1[0-2]|[1-9]):[0-5][0-9] *(a|p|A|P)(m|M) *$"
                Case ValidateValue.CustomExpression
                    strRegExp = ExpressionValue

            End Select

            Me.Attributes.Add("onblur", "Check('" + strRegExp + "',this,'" + _
                    IsRequired.ToString + "')")

            MyBase.OnInit(e)

        End Sub

Render function used renders JavaScript to an ASP.NET textbox control output stream.

  Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
            Dim strScript As String = "<script></script> "
            writer.WriteLine(strScript)
            MyBase.Render(writer)
        End Sub

The heart of this custom control is the JavaScript that does all the tasks of validation. The JavaScript function Check() accepts three parameters:

1. The control that has fired the event
2. The regular expression associated with that textbox. The regular expression could be that of a CreditCard, Time, URL or a custom regex.
3. Boolean variable that indicates whether the field is required or not.

The JavaScript first checks whether the field is required or not. If it is required, then it checks whether the textbox contains a value or not. If it does not contain a value, a pop up message is shown. If a value exists, it is checked for validity. Depending on whether the field is valid or invalid, a pop up message is shown.

If the field is not required and no value is entered in the textbox, no action is taken. But if a value is entered, then it is checked for validity.

function Check(regex,obj,reqd)
{
    re = new RegExp(regex);
    var Prefix=obj.id;
    var Ctrl=document.getElementById(Prefix);
    var value=Ctrl.value;
    if (reqd=='True')
        {
            if (value=='')
            {
            alert('Value Required');
            Ctrl.focus();
            }
            else
            {
            if (re.test(value))
                {
                alert('Valid');
                }
            else
                {
                 alert('InValid');
                 Ctrl.focus();
                }
             }
         }

    else
         {
             if (value=='')
             {}
             else
             {
                if (re.test(value))
                 {
                 alert('Valid');
                 }
                 else
                 {
                  alert('InValid');
                  Ctrl.focus();
                 }
              }
           }
 }

History

• 4^th June, 2008: Initial post