Javascript Date Validation

• Date Validation Tutorial
  • Date Validation

    Javascript for Date Validation - mm/dd/yyyy format

    Its good practice to validate form date values using client side JavaScript validation along with your programming language validation. The following example shows how you can do this for the mm/dd/yyyy format.

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

    JS Date Validation Example

    Validate Date using javascript

    
    

    Enter a Date (mm/dd/yyyy) :
    
    

    View Explanation of the Code

    Cut and Paste Code

    Cut 'n' paste code for the above Example

    Java-script Code

    <script language = "Javascript"> /** * DHTML date validation script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/datevalidation.asp) */ // Declaring valid date character, minimum year and maximum year var dtCh= "/"; var minYear=1900; var maxYear=2100; 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 daysInFebruary (year){ // February has 29 days in any year evenly divisible by four, // EXCEPT for centurial years which are not also divisible by 400. return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 ); } function DaysArray(n) { for (var i = 1; i <= n; i++) { this[i] = 31 if (i==4 || i==6 || i==9 || i==11) {this[i] = 30} if (i==2) {this[i] = 29} } return this } function isDate(dtStr){ var daysInMonth = DaysArray(12) var pos1=dtStr.indexOf(dtCh) var pos2=dtStr.indexOf(dtCh,pos1+1) var strMonth=dtStr.substring(0,pos1) var strDay=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 : mm/dd/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

    <form name="frmSample" method="post" action="" onSubmit="return ValidateForm()"> <p>Enter a Date <font color="#CC0000"><b>(mm/dd/yyyy)</b></font> : <input type="text" name="txtDate" maxlength="10" size="15"> </p> <p> <input type="submit" name="Submit" value="Submit"> </p> </form>

    Explanation of the Code

    The JavaScript has the following main functions:

    isDate Function

    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 month, day and year integers. They are each validated seperately and combined together.

    ValidateForm Function

    Function ValidateForm is used to check if the date field is valid on form submission

Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks for your encouragement!