Products
Services
Contact Us

Scripts: Javascript :: Forms :: Library Article #22

Developer's Section

Javascipt Numeric / Money Validator
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (2040)
Favorites:

Learn to validate input fields that require numeric or money values using Javascript.

In this tutorial we will learn how to validate an input field that requires only numeric or money values. In the next example the function isNumber helps us validate the data we are going to submit on the form. This function takes four arguments:

  • Argument 1: The number to be validated
  • Argument 2: Check for decimal values
  • Argument 3: Check for negative numbers
  • Argument 4: Check for commas on the number (Used when validating currency types)

Please look at the following example:

Check for Valid Numbers:
Enter a Dollar Amount:
Enter a Positive Integer:
Enter Integer or Decimal Number:
Enter a Positive / Negative Number or Decimal Number:


Let's create this script in a simple 2 Step process.

Step 1: Create the Javascript


 Code Snippet 1

<script language="javascript"> 

//Javascript complex number /money validator 
function isNumber(s , checkFloat, checkNegative, checkCommas) {  
  var errF = false;  
  var i;  
  var dCheck = false;  
  var c = ""; 

  if( s.length == 0 || s == "-") { errF = true; }  

  for (i = 0; i < s.length; i++)  
  {     
    // Check that current character is number.  
    c = s.charAt(i);  

    if((c == "-") && (i == 0) && (s.length > 0)) {  
      //check negative numbers  
      if(checkNegative == false) { errF = true; }  
    }  
    else {  
      if( ((c == ".") && (checkFloat == true) && (dCheck == false))) {  
        //pass . operator when checking decimal value  
        dCheck = true ; 
      }   
      else if(c == "," && checkCommas == true) { 
        //pass , while checking for commas 
      } else if (((c < "0") || (c > "9"))) {  
         errF = true ; 
       }  
     }  
   }  

   if(errF == false && checkCommas == true) { 
     //handle special cases
     if(s.substring(0,1) == ","){errF = true;} 
     s = (s.substring(0,1) == "-")? s.substring(1) : s;
     if(s.substring(0,1) == "0" && s.indexOf(",") > -1){errF = true;}

     var bF = false; 
     var cF = false; 
     var cR = 0; 

     for (var k = 0; k < s.length; k++) //last check 
     {  
       c = s.charAt(k); 

       if( c == "," && ( cF == false || cR != 3 && cF == true || bF == true)) { 
         if(k > 3 && cF == false || cF == true){ 
           errF = true; 
           break; 
         }  
         cF = true;  
       } else if(c == "." && k + 3 >= s.length && bF == false &&  
                                        ((cR == 0 && cF == false) || cR == 3)){ 
         bF = true; 
       } else if(((c < "0") || (c > "9")) && c != ",") { 
         errF = true; 
       } else if(cR == 3 && c != "," && bF == false) { 
         errF = true; 
       } else if(cF == true){ 
         cR = (cR == 3 )? 0 : cR + 1; 
       } 
     } 
     if(bF == false || c == "."){ errF = true;} // User must include cents
   } 

   if(errF == true) {  
     alert("Please enter a valid number")  
   }  
   else { 
     alert("This number is valid")  
   }  
       
 }  
</script> 

Step 2: Create a form where you can use the javascript described above:


 Code Snippet 2

<form name="check_numbers">
<table border="1" style="border-collapse: collapse">
<tr>
     <td colspan="3">Check for Valid Numbers:</td>
</tr>
<tr>
     <td>Enter a Dollar Amount:</td>
     <td><input type="text" name="myInteger0"></td>
     <td><input type="button" value="validate"
      onclick="isNumber(this.form.myInteger0.value, true, true, true)"></td>
</tr>
<tr>
     <td>Enter a Positive Integer:</td>
     <td><input type="text" name="myInteger"></td>
     <td><input type="button" value="validate"
      onclick="isNumber(this.form.myInteger.value, false, false, false)"></td>
</tr>
<tr>
     <td>Enter Integer or Decimal Number:</td>
     <td><input type="text" name="myInteger2"></td>
     <td><input type="button" value="validate"
      onclick="isNumber(this.form.myInteger2.value, true, false, false)"></td>
</tr>
<tr>
     <td>Enter a Positive / Negative Number or Decimal Number:</td>
     <td><input type="text" name="myInteger3"></td>
     <td><input type="button" value="validate"
      onclick="isNumber(this.form.myInteger3.value, true, true, false)"></td>
</tr>
</table>
</form>

The end. Good luck!.


See other Scripts in Forms

 

Submit Your Scripts:

If you would like to have your Javascripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Email:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]