snook.ca

Month Validator

Date created: June 12, 2005
Visit the discussion

The validation occurs when the user exits the Month input. In this form, the date and year inputs have no behaviour and are simply for show.

The type of validation that is performed:

  • if it's a number:
    • check if it's between 1 and 12
    • check if it's greater than 12 then parse one and two character combinations for possible month options
  • if it's not a number:
    • check if the name is an exact match
    • check if the first three letters match
    • ...then first 2 letters
    • ...then first letter
MonthDayYear
 

Source:



<script type="text/javascript">
<!--
Array.prototype.removeDuplicates = function(){
   for(var i=0,j=this.length;i<j;i++)
  {
    for(var k=0;k<i;k++)
    {
      if(this[i] == this[k])
      {
        this.splice(i,1);
        i--;j--;k--; // adjust for removed element
      }
    }
   }
};

function numSort(a,b)
{
  a = parseInt(a);
  b = parseInt(b);
  if(a > b) return 1;
  if(b > a) return -1;
  return 0;
}

window.onload = function()
{
  if(document.getElementById)
  {
    var el = document.getElementById("monthinput");
    // id of where to place error messaging
    el.error = "montherror";
    el.monthlist = new Array("January","February","March","April","May","June","July","August","September","October","November","December");

    // =============================
    // assign function to element
    el.set = function(m)
    {
      this.value = this.monthlist[m];
      var el = document.getElementById(this.error);
      el.innerHTML = "";
    };

    // =============================
    // assign function to element
    el.valid = function()
    {

      var v = this.value;
      var ea = new Array();

      // Evaluate Numerical Combinations
      if(/^[0-9]+$/.test(v))
      {
        if(v>0 && v<13){
          // a number between 1 and 12 means it's a month -- too easy
          this.set(v-1);
          return;
        }else{
          // loop through each numeric value and determine possible options
          for(var i=0;i<v.length;i++)
          {
            var v1 = v.substr(i,1);
            var v2 = v.substr(i,2);
            if(v1 > 0) ea.push(v1-1); // store month number in array
            if(v2 > 0 && v2 <13)ea.push(v2-1); // store month number in array
          }
        }
      }else{
        // Evaluate Non-numerical combinations

        // is it an exact match?
        for(var i=0,j=this.monthlist.length;i<j;i++)
        {
          if(this.monthlist[i].toLowerCase() == v.toLowerCase()) {
            this.set(i);
            return;
          }
        }

        // compare first three characters
        if(v.length == 3){
          var v3 = v.toLowerCase();
          for(var i=0,j=this.monthlist.length;i<j;i++)
          {
            if(this.monthlist[i].substr(0,3).toLowerCase() == v3) {
              this.set(i);
              return;
            }
          }
        }

        // compare first three characters
        if(v.length > 3){
          var v3 = v.substr(0,3).toLowerCase();
          for(var i=0,j=this.monthlist.length;i<j;i++)
          {
            if(this.monthlist[i].substr(0,3).toLowerCase() == v3) ea.push(i);
          }
        }

        // compare first one and two characters for possible matches
        if(v.length == 2)
        {
          for(var i=0,j=this.monthlist.length;i<j;i++)
          {
            if(this.monthlist[i].substr(0,2).toLowerCase() == v.substr(0,2).toLowerCase())ea.push(i);
          }
        }

        if(v.length == 1)
        {
          for(var i=0,j=this.monthlist.length;i<j;i++)
          {
            if(this.monthlist[i].substr(0,1).toLowerCase() == v.substr(0,1).toLowerCase())ea.push(i);
          }
        }


      };

      var msg = 'I\'m sorry, I don\'t understand.';
      // display error messaging
      var el = document.getElementById("montherror");
      if(ea.length){
        msg += ' Did you mean ';
        ea.sort(numSort); // sort array using numerical sort function
        ea.removeDuplicates();

        for(var i=0;i<ea.length;i++)
        {
          msg += '<'+'a href="#" onclick="document.getElementById(\''+this.id+'\').set('+ea[i]+');return false;">' + this.monthlist[ea[i]] + '</'+'a>';
          if(i == ea.length - 1){
            msg += "?";
          }else if(i == ea.length - 2){
            msg += " or ";
          }else{
            msg += ", ";
          }
        }
      }
      if(this.value.length > 0)
      {
        el.innerHTML = msg;
      }else{
        el.innerHTML = '';
      }
    };

    el.onblur = el.valid; // run object function onchange

  }

}
//-->
</script>