Date Validation JavaScript vs Code Behind vs RangeValidator

Although you can use a RangeValidator or CustomValidator to evaluate the contents of a textbox that captures a date, there might be instances in which you want to use a Client-JavaScript to manually validate or manipulate what's typed.

Another possible situation is to do this on the code behind to validate the input at the moment the data is sent to the server.

After reading a few blogs and articles, below are two JavaScript functions that I've found extremely useful to validate dates.

Validating the String

Notice how this function will evaluate a string input by using a regular expression. It separates the string and checks if the date elements fall within the numeric range established.

function validateUSDate(strValue) {

    var objRegExp = /^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/
    
    //check to see if in correct format
    if (!objRegExp.test(strValue))
        return false; //doesn't match pattern, bad date
    else {
        var strSeparator = strValue.substring(2, 3)
        var arrayDate = strValue.split(strSeparator);
        //create a lookup for months not equal to Feb.
        var arrayLookup = { '01': 31, '03': 31,
            '04': 30, '05': 31,
            '06': 30, '07': 31,
            '08': 31, '09': 30,
            '10': 31, '11': 30, '12': 31
        }
        var intDay = parseInt(arrayDate[1], 10);
        
        //check if month value and day value agree
        if (arrayLookup[arrayDate[0]] != null) {
            if (intDay <= arrayLookup[arrayDate[0]] && intDay != 0)
                return true; //found in lookup table, good date
        }
        
        var intMonth = parseInt(arrayDate[0], 10);
        if (intMonth == 2) {
            var intYear = parseInt(arrayDate[2]);
            if (intDay > 0 && intDay < 29) {
                return true;
            }
            else if (intDay == 29) {
                if ((intYear % 4 == 0) && (intYear % 100 != 0) ||
     (intYear % 400 == 0)) {
                    // year div by 4 and ((not div by 100) or div by 400) ->ok
                    return true;
                }
            }
        }
    }
    return false; //any other values, bad date
}

Implementing validateUSDate

Below is another function that demonstrates how the validateUSDate function is being implemented in the JavaScript attached to the TextBox's OnBlur event. If the entered date fails, we default the date to Today.

function fWorkDateValidate(str, object) {
    var dt = new Date();
    var dd = dt.getDate();
    var mm = dt.getMonth() + 1; //January is 0!
    var yyyy = dt.getFullYear();
    
    if (dd < 10) { dd = '0' + dd }
    if (mm < 10) { mm = '0' + mm } 
    
    var today = mm + '/' + dd + '/' + yyyy;
    
    if (validateUSDate(str) == false ) {
        alert('Invalid Work Date entered. Please specify date in format mm/dd/yyyy. 
		Example: ' + today);
        object.value = today;
        object.focus();
    }
}

Textbox Date HTML

<asp:TextBox ID="TextBox3" runat="server"  
style="font-family: Arial, Helvetica, sans-serif;font-size: small;
text-align: right; color: #FF6600" 
Width="81px"onBlur="fWorkDateValidate(this.value, this);" MaxLength="10"></asp:TextBox>

I have to admit that I didn't write validateUSDate, I just modified it to fit my needs, I wanted to give credit to the authors but unfortunately since I tried code from several blogs, I can't find the exact pages where I took the function from. So credit is due to the author(s), whoever they are.

In case you need to validate a date range in code behind, below is an "if" statement to validate data elements using a Regular Expression. Notice how we can easily define the ranges, for example 0 to 1 and 0-9 for the month digits, then a "/", then a 0-3 for the first digit of the day and so on... you get the idea.

if (String.IsNullOrEmpty(TextBox3.Text) ||
Regex.IsMatch(TextBox3.Text, @"^[0-1]?[0-9](/|-)[0-3]?[0-9](/|-)
[1-2][0-9][0-9][0-9]$") == false)

RangeValidator

Finally, let's review how can you use a RangeValidator to evaluate a date. It is a piece of cake. Just keep in mind that you need to specify a "type" of Date on your Validator and define the Minimum and Maximum Values.

<asp:RangeValidator ID="StDateValidator" runat="server" 
    ControlToValidate="TextBox1" Type="Date" 
    MinimumValue="01/21/1980" MaximumValue="12/31/2100" 
    ErrorMessage="Invalid Start Date. Please verify." 
    style="font-family: Arial, Helvetica, sans-serif; 
    font-size: xx-small; font-weight: 700"></asp:RangeValidator>

The validator will display the error message automatically, if the data on TextBox1 does not pass the validation.

Happy coding,
Will

CodeProject
<meta name="Date Validation JavaScript vs Code Behind, vs DateRangeValidator" />