Most Useful JavaScript Functions

Saturday, October 4, 2008
We use Java Script in many situations in our web applications. For the validation purse. Here I am writing some useful java script functions which we use frequently.
I am giving the code for the fallowing…


  • Validate the date format

  • Not allowing to select previous date

  • Not allowing to select future date

  • Allowing only to enter date

  • Allowing only phone numbers(US Format)

  • Check for valid phone no or not (US Format)

  • Allowing only zip code

  • Check for valid zip code or not

  • Allowing only SSN

  • Check for valid SSN or not

  • Allowing only Numbers

  • Allowing only Alphabets

  • Allowing only Alpha Numeric characters

  • Allowing only special characters

  • Allowing Only Decimal values

  • Allowing only capital letters

  • Allowing only small letters

  • Trims trailing whitespace chars

  • Trims leading whitespace chars

  • Removes leading and trailing spaces

  • Prevents event firing on enter key press

  • Disabling BackSpace and delte button

how to Use this validations???

We have to Use this functions based on the situations, we can use textbox's "onkeypress()", "onblur()" events.

Here is a sample...

  1.  <asp:TextBox ID="txtname" runat="server" onkeypress="isDateNumberKey(event,this)" onblur="return ValidateDateNoBack(this)"></asp:TextBox>

  2.     <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtname" Format="MM/dd/yyyy">

  3.     </cc1:CalendarExtender>




In the above code, I use two functions one for Not allowing the previous date and another for the
allow to enter only date. Here you can enter only date.

1.Validate the date format

  1. function ValidateDate(ctrl)

  2. {

  3.     if (ctrl.value.length != 10)

  4.     {

  5.         if (ctrl.value.length == 0)

  6.         {

  7.             return true;

  8.         }

  9.         else

  10.         {

  11.             alert('Invalid Date! Please enter in MM/DD/YYYY or MM-DD-YYYY format.')

  12.             ctrl.value = "";

  13.             ctrl.focus();

  14.             window.event.keyCode = 0;

  15.             return false;

  16.         }

  17.     }

  18.    

  19.     if (ctrl.value.length > 0)

  20.     {

  21.         strValue = ctrl.value;

  22.         var objRegExp = /^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/

  23.  

  24.         //check to see if in correct format

  25.         if(!objRegExp.test(strValue))

  26.         {

  27.             alert('Invalid Date! Please enter in MM/DD/YYYY or MM-DD-YYYY format.')

  28.             ctrl.value = "";

  29.             ctrl.focus();

  30.             window.event.keyCode = 0;

  31.             return false; //doesn't match pattern, bad date

  32.         }

  33.         else

  34.         {

  35.             var strSeparator = strValue.substring(2,3) //find date separator

  36.             var arrayDate = strValue.split(strSeparator); //split date into month, day, year

  37.             //create a lookup for months not equal to Feb.

  38.             var arrayLookup = { '01' : 31,'03' : 31, '04' : 30,'05' : 31,'06' : 30,'07' : 31,

  39.                                 '08' : 31,'09' : 30,'10' : 31,'11' : 30,'12' : 31}

  40.             var intDay = parseInt(arrayDate[1],10);

  41.  

  42.             var intYear = parseInt(arrayDate[2]);

  43.             if ((intYear < 1900) || (intYear > 2020))

  44.             {

  45.                 alert('Invalid Date! Please enter a year between 1900 and 2020.')

  46.                 ctrl.value = "";

  47.                 ctrl.focus();

  48.                

  49.                 window.event.keyCode = 0;

  50.                 return false;

  51.             }

  52.            

  53.             //check if month value and day value agree

  54.             if(arrayLookup[arrayDate[0]] != null)

  55.             {

  56.                 if ((intDay <= arrayLookup[arrayDate[0]]) && (intDay > 0))

  57.                 {

  58.                     return true;

  59.                 }

  60.                 else

  61.                 {

  62.                     alert('Invalid Date! Please enter a valid Date.')

  63.                     ctrl.value = "";

  64.                     ctrl.focus();

  65.                     window.event.keyCode = 0;

  66.                     return false;

  67.                 }

  68.             }

  69.  

  70.             var intMonth = parseInt(arrayDate[0],10);

  71.            

  72.             if ((intMonth < 0) ||(intMonth > 11))

  73.             {

  74.                 alert('Invalid Month! Please enter a valid month.')

  75.                 ctrl.value = "";

  76.                 ctrl.focus();

  77.                 window.event.keyCode = 0;

  78.                 return false;

  79.             }

  80.            

  81.             if (intMonth == 2)

  82.             {

  83.                 var intYear = parseInt(arrayDate[2]);

  84.                 if (intDay > 0 && intDay < 29)

  85.                 {

  86.                     return true;

  87.                 }

  88.                 else if (intDay == 29)

  89.                 {

  90.                     if ((intYear % 4 == 0) && (intYear % 100 != 0) || (intYear % 400 == 0))

  91.                     {

  92.                         // year div by 4 and ((not div by 100) or div by 400) ->ok

  93.                         return true;

  94.                     }  

  95.                 }

  96.                 else

  97.                 {

  98.                     alert('Invalid Date! Please enter a valid Date.')

  99.                     ctrl.value = "";

  100.                     ctrl.focus();

  101.                     window.event.keyCode = 0;

  102.                     return false;

  103.                 }

  104.             }

  105.            

  106.         }

  107.         alert('Invalid Date! Please enter in MM/DD/YYYY or MM-DD-YYYY format.')

  108.         ctrl.value = "";

  109.         ctrl.focus();

  110.         window.event.keyCode = 0;

  111.         return false; //any other values, bad date

  112.     }

  113.     else

  114.     {

  115.         return true;

  116.     }

  117. }





2.Not allowing to select previous date

  1. //No Back date

  2. function ValidateDateNoBack(ctrl)

  3. {

  4.  if (ctrl.value.length > 0 && ValidateDate(ctrl))

  5.  {

  6.      strValue = ctrl.value;

  7.  

  8.             //Check here to validate previous dates.

  9.             var strSeparator2 = strValue.substring(2,3); //find date separator

  10.             var arrayDate2 = strValue.split(strSeparator2); //split date into month, day, year

  11.             var myDate=new Date();

  12.             var yr1 = parseInt(arrayDate2[2]);

  13.             var mon1 = parseInt(arrayDate2[0]-1,10);

  14.             var day1 = parseInt(arrayDate2[1],10);

  15.             myDate.setFullYear(yr1,mon1,day1);

  16.             var today = new Date();            

  17.             if (myDate<today)

  18.             {

  19.                 alert('Invalid Date! This field accepts only future dates. Please enter a future date');

  20.                 ctrl.value = "";

  21.                 ctrl.focus();

  22.                 window.event.keyCode = 0;

  23.                 return false;

  24.             }

  25.  }

  26.      else

  27.      {

  28.          return true;

  29.      }

  30. }





3.Not allowing to select future date

  1. //No Future Date

  2. function ValidateDateNoFuture(ctrl)

  3. {

  4.  if (ctrl.value.length > 0 && ValidateDate(ctrl))

  5.  {

  6.      strValue = ctrl.value;

  7.  

  8.             //Check here to validate previous dates.

  9.             var strSeparator2 = strValue.substring(2,3); //find date separator

  10.             var arrayDate2 = strValue.split(strSeparator2); //split date into month, day, year

  11.             var myDate=new Date();

  12.             var yr1 = parseInt(arrayDate2[2]);

  13.             var mon1 = parseInt(arrayDate2[0]-1,10);

  14.             var day1 = parseInt(arrayDate2[1],10);

  15.             myDate.setFullYear(yr1,mon1,day1);

  16.             var today = new Date();            

  17.             if (myDate>today)

  18.             {

  19.                 alert('Invalid Date! This field does not accept a future date. Please enter a valid Date');

  20.                 ctrl.value = "";

  21.                 ctrl.focus();

  22.                 window.event.keyCode = 0;

  23.                 return false;

  24.             }

  25.  }

  26.      else

  27.      {

  28.          return true;

  29.      }

  30.  

  31. }





4.Allowing only to enter date

  1. //Alow only Enter to date

  2. function isDateNumberKey(evt,ctrl)

  3. {

  4.    // Will allow '/' and numbers only.

  5.    var charCode = (evt.which) ? evt.which : event.keyCode;

  6.    

  7.    if (charCode == 47 || charCode == 45)

  8.       return true;

  9.    else

  10.    {

  11.        if (charCode > 31 && (charCode < 48 || charCode > 57))

  12.        {

  13.         window.event.keyCode = 0;

  14.         return false;

  15.        }

  16.        else

  17.        {

  18.         if (ctrl.value.length == 2)

  19.         {

  20.             ctrl.value = ctrl.value + "/";

  21.         }

  22.         else if (ctrl.value.length == 5)

  23.         {

  24.             var idx = ctrl.value.indexOf("-");

  25.             if (idx == -1)

  26.             {

  27.                 ctrl.value = ctrl.value + "/";

  28.             }

  29.             else

  30.             {

  31.                 ctrl.value = ctrl.value + "-";

  32.             }

  33.         }

  34.         return true;

  35.        }

  36.    }

  37. }

  38.  





5.Allowing only phone numbers(USA Format)

  1. //only phone numbers

  2. function isPhoneNumberKey(evt,ctrl)

  3. {

  4.    var charCode = (evt.which) ? evt.which : event.keyCode;

  5.    

  6.    if (charCode == 45)

  7.       return true;

  8.    else

  9.    {

  10.        if (charCode > 31 && (charCode < 48 || charCode > 57))

  11.        {

  12.           window.event.keyCode = 0;

  13.           return false;

  14.        }

  15.        else

  16.        {

  17.         if (ctrl.value.length == 3)

  18.         {

  19.             ctrl.value = ctrl.value + "-";

  20.         }

  21.         else if (ctrl.value.length == 7)

  22.         {

  23.             ctrl.value = ctrl.value + "-";

  24.         }

  25.         return true;

  26.        }

  27.    }

  28. }






6.Check for valid phone no or not (USA Format)

  1. //Allow phone numbers format only(US Format)

  2. function ValidatePhone(ctrl)

  3. {

  4.     var strvalue = ctrl.value;

  5.     if (strvalue != "")

  6.     {

  7.        

  8.         var objRegExp = /^(\d{3})-?\d{3}-?\d{4}$/;

  9.  

  10.         if (objRegExp.test(strvalue) == false)

  11.         {

  12.             alert('Invalid Home Phone number. Please use XXX-XXX-XXXX format.')

  13.             ctrl.value = "";

  14.             ctrl.focus();

  15.             window.event.keyCode = 0;

  16.             return false;

  17.         }

  18.         else if (strvalue.length == 10)

  19.         {

  20.             alert('Invalid Home Phone number. Please use XXX-XXX-XXXX format.')

  21.             ctrl.value = "";

  22.             ctrl.focus();

  23.             window.event.keyCode = 0;

  24.             return false;

  25.         }

  26.         return true;

  27.     }

  28.     else

  29.     {

  30.         return true;

  31.     }

  32. }






7.Allowing only zip code(USA)

  1. //only zip code numbers

  2. function isZipNumberKey(evt)

  3. {

  4.    var charCode = (evt.which) ? evt.which : event.keyCode;

  5.    if (charCode == 45)

  6.       return true;

  7.    else

  8.    {

  9.        if (charCode > 31 && (charCode < 48 || charCode > 57))

  10.        {

  11.         window.event.keyCode = 0;

  12.         return false;

  13.        }

  14.        else

  15.         return true;

  16.    }

  17. }






8.Check for valid zip code or not(USA)

  1. //Zip Code

  2. function validateUSZip(ctrl)

  3. {

  4.     var strValue = ctrl.value;

  5.     var objRegExp  = /(^\d{5}$)|(^\d{5}-\d{4}$)/;

  6.     if (objRegExp.test(strValue) == false)

  7.     {

  8.         alert('Invalid Zipcode.')

  9.         ctrl.value = "";

  10.         ctrl.focus();

  11.         window.event.keyCode = 0;

  12.         return false;

  13.     }

  14.     return true;

  15. }





9.Allowing only SSN(USA)

  1. //only zip code numbers

  2. function isZipNumberKey(evt)

  3. {

  4.    var charCode = (evt.which) ? evt.which : event.keyCode;

  5.    if (charCode == 45)

  6.       return true;

  7.    else

  8.    {

  9.        if (charCode > 31 && (charCode < 48 || charCode > 57))

  10.        {

  11.         window.event.keyCode = 0;

  12.         return false;

  13.        }

  14.        else

  15.         return true;

  16.    }

  17. }

  18.  






10.Check for valid SSN or not(USA)

  1. //Allow SSN format only

  2. function ValidateSSN(ctrl)

  3. {

  4.     if (ctrl.value.length > 0)

  5.     {

  6.         var strval = ctrl.value;

  7.         if (strval.length != 11)

  8.         {

  9.             alert('Invalid SSN! Please use XXX-XX-XXXX format.');

  10.             ctrl.value = "";

  11.             ctrl.focus();

  12.             window.event.keyCode = 0;

  13.             return false;

  14.         }

  15.         else

  16.         {

  17.             var data = strval.replace('-','');

  18.             data = data.replace('-','');

  19.             if (data.length != 9)

  20.             {

  21.                 alert('Invalid SSN! Please use XXX-XX-XXXX format.');

  22.                 ctrl.value = "";

  23.                 ctrl.focus();

  24.                 window.event.keyCode = 0;

  25.                 return false;

  26.             }

  27.             else if (data.indexOf("-") != -1)

  28.             {

  29.                 alert('Invalid SSN! Please use XXX-XX-XXXX format.');

  30.                 ctrl.value = "";

  31.                 ctrl.focus();

  32.                 window.event.keyCode = 0;

  33.                 return false;

  34.             }

  35.             else

  36.             {

  37.                 var part1 = strval.charAt(3);

  38.                 var part2 = strval.charAt(6);

  39.                 if (part1 != '-')

  40.                 {

  41.                     alert('Invalid SSN! Please use XXX-XX-XXXX format.');

  42.                     ctrl.value = "";

  43.                     ctrl.focus();

  44.                     window.event.keyCode = 0;

  45.                     return false;

  46.                 }

  47.                 if (part2 != '-')

  48.                 {

  49.                     alert('Invalid SSN! Please use XXX-XX-XXXX format.');

  50.                     ctrl.value = "";

  51.                     ctrl.focus();

  52.                     window.event.keyCode = 0;

  53.                     return false;

  54.                 }

  55.                 return true;

  56.             }

  57.         }

  58.     }

  59. }

  60.  






11.Allowing only Numbers

  1. //Number only

  2. function isOnlyNumberKey(evt)

  3. {

  4.    var charCode = (evt.which) ? evt.which : event.keyCode;

  5.    if (charCode > 31 && (charCode < 48 || charCode > 57))

  6.    {

  7.     window.event.keyCode = 0;

  8.     return false;

  9.    }

  10.    else

  11.     return true;

  12. }






12.Allowing only Alphabets

  1. //Alphabets only

  2. function isOnlyAlphaKey(evt)

  3. {

  4.     var charCode = (evt.which) ? evt.which : event.keyCode;

  5.    if (((charCode >= 65) && (charCode <= 90)) || ((charCode >= 97) && (charCode <= 122)) || (charCode == 32))

  6.     return true;

  7.    else

  8.    {

  9.     window.event.keyCode = 0;

  10.     return false;

  11.    }

  12. }






13.Allowing only Alpha Numeric characters

  1. //Alphanumerals only

  2. function isAlphaNumericKey(evt)

  3. {

  4.     var charCode = (evt.which) ? evt.which : event.keyCode;

  5.    if (((charCode >= 48) && (charCode <= 57)) || (((charCode >= 65) && (charCode <= 90)) || ((charCode >= 97) && (charCode <= 122))))

  6.     return true;

  7.    else

  8.    {

  9.     window.event.keyCode = 0;

  10.     return false;

  11.    }

  12.  }






14.Allowing only special characters

  1. //Only Special Characters

  2. function isSpecialCharsKey(evt)

  3. {

  4.     var charCode = (evt.which) ? evt.which : event.keyCode;

  5.    if (((charCode >= 48) && (charCode <= 57)) || (((charCode >= 65) && (charCode <= 90)) || ((charCode >= 97) && (charCode <= 122))))

  6.    {

  7.     window.event.keyCode = 0;

  8.     return false;

  9.    }

  10.    else

  11.     return true;

  12.  }






15.Allowing Only Decimal values

  1. //Only Decimal values

  2. //onkeypress="return isKeyDecimal(this,event);"

  3. function isKeyDecimal(ctrl,evt)

  4. {

  5.     var charCode = (evt.which) ? evt.which : event.keyCode;

  6.    if (charCode != 46 && (charCode < 48 || charCode > 57))

  7.    {

  8.         window.event.keyCode = 0;

  9.         return false;

  10.     }

  11.    else

  12.    {

  13.         if (charCode == 46)

  14.         {

  15.             var abc = ctrl.value.split(".");

  16.             if (abc.length > 1)

  17.             {

  18.                 window.event.keyCode = 0;

  19.                 return false;

  20.             }

  21.             else

  22.             {

  23.                 return true;

  24.             }

  25.         }

  26.         else

  27.         {

  28.             return true;

  29.         }

  30.    }

  31. }






16.Allowing Only Capital letters

  1. //ALLOW ONLY CAPITAL LETTERS

  2. function onlyUpperCase(ctrl)

  3. {

  4.     ctrl.value =  (ctrl.value.toUpperCase());

  5. }






17.Allowing Only small letters

  1. //ALLOW ONLY SMALL LETTERS

  2. function onlyLowerCase(ctrl)

  3. {

  4.     ctrl.value =  (ctrl.value.toLowerCase());

  5. }

  6.  







18.Trims trailing whitespace chars

  1. //Trims trailing whitespace chars.

  2. //strValue - String to be trimmed.

  3. //returns - Source string with right whitespaces removed.

  4. function rightTrim( strValue )

  5. {

  6.   var objRegExp = /^([\w\W]*)(\b\s*)$/;

  7.  

  8.     if(objRegExp.test(strValue)) {

  9.     //remove trailing a whitespace characters

  10.     strValue = strValue.replace(objRegExp, '$1');

  11.     }

  12.   return strValue;

  13. }

  14.  






19.Trims leading whitespace chars

  1. //Trims leading whitespace chars.

  2. //strValue - String to be trimmed.

  3. //returns - Source string with left whitespaces removed.

  4. function leftTrim( strValue )

  5. {

  6.   var objRegExp = /^(\s*)(\b[\w\W]*)$/;

  7.  

  8.     if(objRegExp.test(strValue)) {

  9.     //remove leading a whitespace characters

  10.     strValue = strValue.replace(objRegExp, '$2');

  11.     }

  12.   return strValue;

  13. }






20.Removes leading and trailing spaces

  1. //Removes leading and trailing spaces.

  2. //strValue - Source string to be trimmed.

  3. //returns - Source string with whitespaces removed.

  4. function trimAll( strValue ) {

  5.  

  6.   var objRegExp = /^(\s*)$/;

  7.  

  8.   //check for all spaces

  9.   if(objRegExp.test(strValue)) {

  10.     strValue = strValue.replace(objRegExp, '');

  11.     if( strValue.length == 0)

  12.       return strValue;

  13.     }

  14.  

  15.   //check for leading &amp; trailing spaces

  16.   objRegExp = /^(\s*)([\W\w]*)(\b\s*$)/;

  17.   if(objRegExp.test(strValue)) {

  18.     //remove leading and trailing whitespace characters

  19.     strValue = strValue.replace(objRegExp, '$2');

  20.     }

  21.   return strValue;

  22. }

  23.  






21.Prevents event firing on enter key press

  1. //Prevents event firing on enter key press

  2. function AvoidEnterKeyEvent()

  3. {

  4.     if (window.event.keyCode == 13)

  5.     {

  6.         event.returnValue=false;

  7.         event.cancel = true;

  8.     }

  9. }






22.Disabling BackSpace and delete button

  1. function funkey(evt)

  2. {

  3.   var charCode = (evt.which) ? evt.which : event.keyCode;

  4.  

  5.   if((charCode == 8) || (charCode == 46))

  6.   {

  7.      return false;

  8.   }

  9.    else

  10.     return true;

  11. }


Posted by Ramky at 5:18 AM Labels:

3 comments:

Sudheer V Muhammed said...

nice work

October 4, 2008 at 8:57 PM
Sudheer V Muhammed said...

ASP useful tips

http://aspusefultips.blogspot.com/

October 4, 2008 at 8:57 PM
Arjun said...

Thanks

October 5, 2008 at 12:07 AM

Post a Comment

Subscribe to: Post Comments (Atom)