Introduction
Basics of DHTML
IE vs Netscape

DHTML Effects
Drop Down Menus
Tip Boxes

DHTML Forms
Date Validation
Email Validation
Phone No. Validation
Text Box Char Counter
Reset with Image field
Check All check boxes

Javascript Date Validation - dd/mm/yyyy

In forms when asking for date fields it is a good idea to validate the date value using client side (JavaScript) validation along with your programming language validation. The following example shows how you can do this for the dd/mm/yyyy format.

We have also provided the javascript date validation for the mm/dd/yyyy format.

Example

Example of Date Validation

View Explanation of the Code

Cut and Paste Code

Cut 'n' paste code for the above Example

Java-script Code

function isInteger(s){
	var i;
    for (i = 0; i < s.length; i++){   
        // Check that current character is number.
        var c = s.charAt(i);
        if (((c < "0") || (c > "9"))) return false;
    }
    // All characters are numbers.
    return true;
}

function stripCharsInBag(s, bag){
	var i;
    var returnString = "";
    // Search through string's characters one by one.
    // If character is not in bag, append to returnString.
    for (i = 0; i < s.length; i++){   
        var c = s.charAt(i);
        if (bag.indexOf(c) == -1) returnString += c;
    }
    return returnString;
}

function isDate(dtStr){
	var daysInMonth = DaysArray(12)
	var pos1=dtStr.indexOf(dtCh)
	var pos2=dtStr.indexOf(dtCh,pos1+1)
	var strDay=dtStr.substring(0,pos1)
	var strMonth=dtStr.substring(pos1+1,pos2)
	var strYear=dtStr.substring(pos2+1)
	strYr=strYear
	if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
	if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
	for (var i = 1; i <= 3; i++) {
		if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
	}
	month=parseInt(strMonth)
	day=parseInt(strDay)
	year=parseInt(strYr)
	if (pos1==-1 || pos2==-1){
		alert("The date format should be : dd/mm/yyyy")
		return false
	}
	if (strMonth.length<1 || month<1 || month>12){
		alert("Please enter a valid month")
		return false
	}
	if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){
		alert("Please enter a valid day")
		return false
	}
	if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
		alert("Please enter a valid 4 digit year between "+minYear+" and "+maxYear)
		return false
	}
	if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))==false){
		alert("Please enter a valid date")
		return false
	}
return true
}

function ValidateForm(){
	var dt=document.frmSample.txtDate
	if (isDate(dt.value)==false){
		dt.focus()
		return false
	}
    return true
 }

</script>

HTML Code

Explanation of the Code

The JavaScript has the following main functions:

Function isDate is used to verify if the given value is a valid date in the format (mm/dd/yyyy) : This function first specifies the non-digit character which is allowed in the date ("/" is used here). You can also specify the year range between which the date is valid. These changeable values are declared in the lines (found in the beginning of the code) :

// Declaring valid date character, minimum year and maximum year
var dtCh= "/";
var minYear=1900;
var maxYear=2100;

If the valid date character is changed please make sure you replace it in the HTML and Javascript code too.

Now the date string is seperated into the day, month and year integers. They are each validated seperately and combined together.
Function ValidateForm is used to check if the date field is valid on form submission