Thursday, February 10, 2005

Date Validation with JavaScript

This is a small bit of html to show you how you can use JavaScript to validate dates. This is also leap year compliant.



<html>
<head>
<script type="text/javascript">
function isValidDate(dateStr)
{
if (dateStr == "MM/DD/YYYY")
{
return false;
}

// dateStr must be of format month day year with either slashes
// or dashes separating the parts. Some minor changes would have
// to be made to use day month year or another format.
// This function returns True if the date is valid.
var slash1 = dateStr.indexOf("/");

if (slash1 == -1)
{
slash1 = dateStr.indexOf("-");
}

// if no slashes or dashes, invalid date
if (slash1 == -1)
{
return false;
}

var dateMonth = dateStr.substring(0, slash1)
var dateMonthAndYear = dateStr.substring(slash1+1, dateStr.length);
var slash2 = dateMonthAndYear.indexOf("/");

if (slash2 == -1)
{
slash2 = dateMonthAndYear.indexOf("-");
}

// if not a second slash or dash, invalid date
if (slash2 == -1)
{
return false;
}

var dateDay = dateMonthAndYear.substring(0, slash2);
var dateYear = dateMonthAndYear.substring(slash2+1, dateMonthAndYear.length);

if ( (dateMonth == "") (dateDay == "") (dateYear == "") )
{
return false;
}

// if any non-digits in the month, invalid date
for (var x=0; x < dateMonth.length; x++)
{
var digit = dateMonth.substring(x, x+1);

if ((digit < "0") (digit > "9"))
{
return false;
}
}

// convert the text month to a number
var numMonth = 0;

for (var x=0; x < dateMonth.length; x++)
{
digit = dateMonth.substring(x, x+1);
numMonth *= 10;
numMonth += parseInt(digit);
}

if ((numMonth <= 0) (numMonth > 12))
{
return false;
}

// if any non-digits in the day, invalid date
for (var x=0; x < dateDay.length; x++)
{
digit = dateDay.substring(x, x+1);
if ((digit < "0") (digit > "9"))
{
return false;
}
}

// convert the text day to a number
var numDay = 0;

for (var x=0; x < dateDay.length; x++)
{
digit = dateDay.substring(x, x+1);
numDay *= 10;
numDay += parseInt(digit);
}

if ((numDay <= 0) (numDay > 31))
{
return false;
}

// February can't be greater than 29 (leap year calculation comes later)
if ((numMonth == 2) && (numDay > 29)) { return false; }

// check for months with only 30 days
if ((numMonth == 4) (numMonth == 6) (numMonth == 9) (numMonth == 11))
{
if (numDay > 30)
{
return false;
}
}

// if any non-digits in the year, invalid date
for (var x=0; x < dateYear.length; x++)
{
digit = dateYear.substring(x, x+1);

if ((digit < "0") (digit > "9"))
{
return false;
}
}

// convert the text year to a number
var numYear = 0;

for (var x=0; x < dateYear.length; x++)
{
digit = dateYear.substring(x, x+1);
numYear *= 10;
numYear += parseInt(digit);
}

// Year must be a 2-digit year or a 4-digit year
if ( dateYear.length != 4 )
{
return false;
}

// check for leap year if the month and day is Feb 29
if ((numMonth == 2) && (numDay == 29))
{
var div4 = numYear % 4;
var div100 = numYear % 100;
var div400 = numYear % 400;

// if not divisible by 4, then not a leap year so Feb 29 is invalid
if (div4 != 0)
{
return false;
}

// at this point, year is divisible by 4. So if year is divisible by
// 100 and not 400, then its not a leap year so Feb 29 is invalid
if ((div100 == 0) && (div400 != 0))
{
return false;
}
}

// date is valid
return true;
}
</script>
</head>

<body>
<form name="aForm" id="aForm">
<input type="text" name="aDate" id="aDate" value="MM/DD/YYYY"/>
<input type="button" value="Check Date" onclick="alert(isValidDate(document.aForm.aDate.value));"/>
</form>
</body>
</html>

No comments: