Date Validation

[Total: 0    Average: 0/5]

You can use this script to validate any date.

Body Code:

<script language="javascript">
/*
 * this function will remove leading zeros from the string.
 */
function removeLeadingZero(_str)
{
 var str="";
 while(_str.length>1 && _str.split("")[0]=="0")
   _str=_str.substr(1,_str.length);
 return _str;
}
/*
 * Revised: 2/2004 - JS-X.com
 * Changed to use CSS for cosmetics
 * Changed alert to show status in form text box.
 */
function validate(_form)
{
   _form.r1.value="";
   _form.r1.className="blank";
   var chk    = 0;
   var maxDay = 0;
   var dd = removeLeadingZero(_form.d.value); // day
   var mm = removeLeadingZero(_form.m.value); // month
   var yy = removeLeadingZero(_form.y.value); // year

   var _dd=parseInt(dd);
   var _mm=parseInt(mm);
   var _yy=parseInt(yy);

   if(dd!=_dd){_form.d.value="";}
   if(mm!=_mm){_form.m.value="";}
   if(yy!=_yy){_form.y.value="";}

   // calling function to get maximum day for this month
   maxDay = max_day(mm, yy);  
   if(dd!=_dd || mm!=_mm || yy!=_yy)   { chk = 1;}
   else if((dd <= 0) || (dd > maxDay)) { chk = 1;}
   else if((mm <= 0) || (mm > 12))     { chk = 1;}
   else if((yy <= 0))                  { chk = 1;} 

   if(chk) { _form.r1.value="Invalid date"; }
   else    { _form.r1.value="Valid date"; }
   setTimeout('document.f1.r1.className="fm1";',300);
}

// function for calculating maximum day 
function max_day(mn, yr)
{
  var mDay;
  if((mn == 4) || (mn == 6) || (mn == 9) || (mn == 11))
  { 
    mDay = 30;
  }
  else if(mn == 2)
  {
    //calling leap year function 
    mDay = isLeapYear(yr) ? 29 : 28;    
  }
  else
  {
    mDay = 31;
  }
  return mDay; 
}

// function to check leap year
function isLeapYear(yr)
{
  if      (yr % 4 != 0)   return false;
  else if (yr % 400 == 0) return true;
  else if (yr % 100 == 0) return false;
  else                    return true;
}
</script>
<style>
.ex1
 {
   border-width:1px;
   border-style:solid;
   border-color: #000000;
 }
.tr1
 {
   background-color: #000000;
 }
.td1
 {
   color: #FFFFFF;
   font-weight: bolder;
   font-size: 12px;
 }
.td2
 {
   color: #FFFFFF;
   font-weight: bolder;
   font-size: 12px;
 }
.fm0
 {
   color: #DD4444;
   background-color: #FFFFFF;
   border-color: #FF0000;
   border-style: solid;
   border-width: 1px;
   font-weight: bold;
 }
.fm1
 {
   color: #DD4444;
   background-color: #FFFFFF;
   border-color: #FF0000;
   border-style: dashed;
   border-width: 1px;
   font-weight: bold;
   text-align: center;
 }
.blank
 {
   color: #000000;
   background-color: #000000;
   border-color: #FFFFFF;
   border-style: solid;
   border-width: 1px;
 }
</style>
<form name="f1"> 
<table class=ex1 cellspacing="0" cellpadding="14">
  <tr class=tr1>
    <td class=td1>&nbsp;Enter date like (10-04-2002) for validation</td>

  </tr>

  <tr>
    <td align="center">
        DD <input type="text" name="d" size="3" onblur="validate(this.form)">
        MM <input type="text" name="m" size="3" onblur="validate(this.form)">
        YYYY <input type="text" name="y" size="5" onblur="validate(this.form)">
        <br>

        <input onfocus=blur() class=fm0 type="button" name="b" value="Submit" onclick="validate(this.form);">

    </td>    
  </tr>
  <tr class=tr1>
    <td class=td2>Valid or Not: <input type=text readonly onfocus=blur() name=r1 class=fm1></td>
  </tr>
</table>
</form>

Times Viewed: 2

Leave a Reply

Your email address will not be published. Required fields are marked *