Duminda Chamara

Sunday, December 27, 2009

Date validation using JavaScript


How to validate date in JavaScript?




Following example shows you how to validate date in JavaScript as a client side validation.





In some cases you may want to validate date and time in your web applications. In such cases you can use javascript to validate date and time. In here this JavaScript checks the user input is in valid date format. It checks DD-MM-YYYY date format and MM-DD-YYYY date formats. First you have to select a date format. Then enter date in given text box and press validate button. If your input date is in correct format the JavaScript tells you that the input date is in correct format. Otherwise it gives an error message telling you that your input date is not in the correct format.





Demo- Validate Date using JavaScript.


JavaScript Date Validator



Select date format

view code



Enter Date



(*Use "-" or "/" as date separator. eg. 07-11-2009 of 12/12/2009)




Try it!




Bookmark and Share




1. Example code for validate date using JavaScript.

JavaScript Code
<script type="text/javascript" language="javascript">

<!--

function dateValidate(){

var inputDate = document.getElementById("txtDateValidate").value;

var dateFormat = document.getElementById("selectDateFormat").value;

var dateValidateRegExp1 = /^\d{2}\/\d{2}\/\d{4}$/;

var dateValidateRegExp2 = /^\d{2}-\d{2}-\d{4}$/;

var dateSplitterIndex = 0;

var isValidDate = 0;

var dateErrorMessage = "Invalid date format.\nDate format should be "+

(dateFormat==1?"MM-DD-YYYY":"DD-MM-YYYY")+

"\nPlease correct and submit again.";


isValidDate+=match_count(inputDate,dateValidateRegExp1);
if(isValidDate>0){

dateSplitterIndex=0;

}else{

isValidDate+=match_count(inputDate,dateValidateRegExp2);

if(isValidDate>0){

dateSplitterIndex=1;

}

}


if(isValidDate==0){

alert(dateErrorMessage);

return false;

}

var dateSplitter="-";

var dateSplitters=Array("/","-");

var monthNames=Array("January","February","March","April",

"May","June","July","August","September",

"October","November","December");
var dmy = inputDate.split(dateSplitters[dateSplitterIndex]);

var month,day,year = 0;

//MM-DD-YYYY DD-MM-YYYY



switch(parseInt(dateFormat)){

case 1:{

month= dmy[0];

day = dmy[1];

year = dmy[2];

}break;



case 2:{

month= dmy[1];

day = dmy[0];

year = dmy[2];

}break;



}
if(month>=1 && month<=12){

if(!(day>=1 && day<=31)){

alert("Please enter valid date (1-31)");

return false;

}

}else{

alert("Month should be 1-12 "+month +" is invalid");

return false;

}



if(year%4==0){

if(month==2){

if(day>29){

alert("February can't have more than 28 days except in a leap year");

return false;

}

}else{

if(!checkDaysOfTheMonth(month,day)){

alert(monthNames[month-1]+" can't have "+day+" days");

return false;

}

}

}else{

if(month==2){

if(!checkDaysOfTheMonth(month,day)){

alert(monthNames[month-1]+" can't have "+day+" days");

return false;

}

}else{

if(!checkDaysOfTheMonth(month,day)){

alert(monthNames[month-1]+" can't have "+day+" days");

return false;

}

}

}
alert("Date you have entered is valid!");

return true;

}

/*--------------------------------------------------------*/

function checkDaysOfTheMonth(month,day){
var daysOfMonth = Array();

daysOfMonth[0] = Array(1,31);

daysOfMonth[1] = Array(2,28);

daysOfMonth[2] = Array(3,31);

daysOfMonth[3] = Array(4,30);

daysOfMonth[4] = Array(5,31);

daysOfMonth[5] = Array(6,30);

daysOfMonth[6] = Array(7,31);

daysOfMonth[7] = Array(8,31);

daysOfMonth[8] = Array(9,30);

daysOfMonth[9] = Array(10,31);

daysOfMonth[10] = Array(11,30);

daysOfMonth[11] = Array(12,31);



for(var i=0;i<daysOfMonth.length;i++){

if(i==(month-1)){

if(!((day>=1) && (day<=daysOfMonth[i][1]))){

return false;

}else{

return true;

}

}

}

}
/*--------------------------------------------------------*/

function match_count(str,regEx){

if(regEx.test(str)){

return 1;

}else{

return 0;

}

}
-->

</script>
Html Code


<html>

 <head>

  <title>How to validate date using JavaScript </title>

 </head>

<body>

<table border="0">

<tr>

<td align="right"> Select date format </td>

<td align="left">

<select name="selectDateFormat" id="selectDateFormat">

<option value="1">MM-DD-YYYY</option>

<option value="2">DD-MM-YYYY</option>

</select>

</td>

<td align="left"> </td>

</tr>

<tr>

<td align="right" valign="top">&nbsp;</td>

<td align="left">&nbsp;</td>

<td align="left">&nbsp;</td>

</tr>

<tr>

<td align="right" valign="top">Enter Date </td>

<td align="left">



<input name="txtDateValidate" type="text" id="txtDateValidate" />

</td>

<td align="left">

<input name="btnDateValidation" type="submit" id="btnDateValidation" value="Validate" onclick="javascript:dateValidate();" />

</td>

</tr>

</table>

</body>

</html>


 »   How to get screen resolution in JavaScript
 »   How to limit characters in textarea using JavaScript
 »   How to validate decimal number in JavaScript
 »   How to validate an email address in JavaScript
 »   How to validate date using JavaScript
 »   JavaScript String functions
 »   How to validate multiple select list box in JavaScript
 »   How to generate random numbers in JavaScript
 »   How to validate multiple check box in JavaScript
 »   How to validate user login in JavaScript
 »   How to validate drop down list in JavaScript
 »   How to validate radio button group in JavaScript
 »   How to create JavaScript alerts
 »    How to create popup windows in JavaScript
 »   How to count words in a text area using JavaScript

©-Copyright By Duminda Chamara
JavaScript Validation  

2 comments:

Biswa said...

working properly

Anonymous said...

Thanx...it works perfectly.