Javascript Date Validation

From Relyimah

Jump to: navigation, search

Occasionally, there is a need to validate dates and ensure they are in the correct format. Previously, either DropDownLists or CustomValidators have been used, but the following is a very handy implementation. Originally obtained from The JavaScript Source, Author Torsten Frey, the below solution will validate dates in dd/mm/yyyy format (using any non-numeric separator).

Javascript File

Place the following code into a Javascript file, jsDateFunctions.js:

jsDateFunctions.js: 

 
/* Date formatting function.  
 * Source: Torsten Frey (tf@tfrey.de) Web Site:  http://www.tfrey.de
 * DI: modified to assume 1950-2049, not 20XX for two digit dates
 * DI: Sql Server Cannot handle dates much lower than year 1800
 * 
 *
 * Usage: set the "onblur" property of the text field to use the check_date function, e.g:
 *    <INPUT type="text" name=testdat size='10' maxlength="10" onblur="check_date(this)">
 *
 * Formats accepted:
 *   ddmmyy (171201) or
 *   ddmmyyyy (17122001) or
 *   ddXmmXyy (17-12-01 or 17y12q01 ... ) or
 *   ddXmmXyyyy (17.12.2001 or 17,12,2001 ...)
 *   where "X" is any sign not in 0..9, i.e. "-" or "/"
 */
 
function check_date(field){
var checkstr = "0123456789";
var DateField = field;
var Datevalue = "";
var DateTemp = "";
var seperator = "/";
var day;
var month;
var year;
var leap = 0;
var err = 0;
var i;
 
   err = 0;
   DateValue = DateField.value;
   /* Delete all chars except 0..9 */
   for (i = 0; i < DateValue.length; i++) {
	  if (checkstr.indexOf(DateValue.substr(i,1)) >= 0) {
	     DateTemp = DateTemp + DateValue.substr(i,1);
	  }
   }
   DateValue = DateTemp;
   /* Always change date to 8 digits - string*/
   /* if year is entered as 2-digit / always assume 1950-2049 */
   if (DateValue.length == 6) {
      // DI: modified to assume 1950-2049, not 20XX for two digit dates
      year = DateValue.substr(4,2);
      if (year < 50) {
        DateValue = DateValue.substr(0,4) + '20' + DateValue.substr(4,2);
      }
      else {
        DateValue = DateValue.substr(0,4) + '19' + DateValue.substr(4,2);
      }
   }
   if (DateValue.length != 8) {
      err = 19;}
   /* year is wrong if year = 0000 */
   year = DateValue.substr(4,4);
   if (year == 0) {
      err = 20;
   }
   /* Validation of month*/
   month = DateValue.substr(2,2);
   if ((month < 1) || (month > 12)) {
      err = 21;
   }
   /* Validation of day*/
   day = DateValue.substr(0,2);
   if (day < 1) {
     err = 22;
   }
   /* Validation leap-year / february / day */
   if ((year % 4 == 0) || (year % 100 == 0) || (year % 400 == 0)) {
      leap = 1;
   }
   if ((month == 2) && (leap == 1) && (day > 29)) {
      err = 23;
   }
   if ((month == 2) && (leap != 1) && (day > 28)) {
      err = 24;
   }
   /* Validation of other months */
   if ((day > 31) && ((month == "01") || (month == "03") || (month == "05") || (month == "07") || (month == "08") || (month == "10") || (month == "12"))) {
      err = 25;
   }
   if ((day > 30) && ((month == "04") || (month == "06") || (month == "09") || (month == "11"))) {
      err = 26;
   }
   /* DI: Sql Server Cannot handle dates much lower than year 1800 */
   if (year < 1800) {
      err = 27;
   }
   /* if 00 ist entered, no error, deleting the entry */
   if ((day == 0) && (month == 0) && (year == 00)) {
      err = 0; day = ""; month = ""; year = ""; seperator = "";
   }
   /* if no error, write the completed date to Input-Field (e.g. 13/12/2001) */
   if (err == 0) {
      DateField.value = day + seperator + month + seperator + year;
   }
   /* Error-message if err != 0 */
   else {
      DateField.value = "Invalid!";
      DateField.select();
	  DateField.focus();
   }
}
 

HTML Page Requiring Date Validation

In the header of the page that requires the date validation, include the jsDateFunctions.js file:

Somefile.html: 

 
<html>
    <head>
        <script language="javascript" type="text/javascript" src="jsDateFunctions.js"></script>
    </head>
    <body>
        ...
    </body>
</html>
 

And in the body of the page, add an onblur event that references the check_date function:

Somefile.html: 

 
<html>
    <head>
        ...
    </head>
    <body>
        <INPUT type="text" name=testdat size='10' maxlength="10" onblur="check_date(this)">
    </body>
</html>
 
Retrieved from "http://wiki.relyimah.com.au/index.php5/Javascript_Date_Validation"
Personal tools