Validating Special Numbers

By Vince Barnes

Maybe you know how to check an input field to ensure it only contains numeric digits, but how do you validate a number with special formatting?  There are as many solutions to a given problem as there are creative minds applied to the task of resolving it. I thought it would help to show a couple of fairly simple JavaScript solutions that perform some basic validation. In the end, you may have the need to verify your specially formed number against a database containing valid instances.  For example, in the input was a formatted phone number, you might have to check it against a contacts database. This would be a more involved solution than I will be describing here. What we can do is to show techniques for validating that only certain characters are entered into a field and to look for a particular type of formatting.

For this example, we're going to assume a requirement for a number  formatted like a US Social Security number, which follows the format 999-99-9999 (three digits, hyphen, two digits, hyphen, four digits.) If you need to get the basics of JavaScript, see this primer:
http://www.htmlgoodies.com/primers/jsp/

In each of these examples, the function is named "regular" and can be called thus:

<INPUT TYPE="TEXT" SIZE="12" MAXLENGTH="12" onChange="if (!regular(this.value)) alert('Not Valid')">

We use "onChange" to trigger our test when the contents of the field have been changed. We call the "regular" function passing it the value of our input field as a string ("this.value"). We say that if "regular" does not return true ("!" is for "not") put up an alert with the text "Not Valid":
if (!regular(this.value)) alert('Not Valid')

Here is a piece of JavaScript that will check that only certain characters have been entered in a field:

<SCRIPT LANGUAGE="JavaScript"><!--

function regular(string) {
if (!string) return false;
var Chars = "0123456789-";

for (var i = 0; i < string.length; i++)
{ if (Chars.indexOf(string.charAt(i)) == -1)
return false;
}
return true;
}
//--></SCRIPT>

Let's look under the hood.

First we check to see that a string has been passed to our routine and return with an error if not:
if (!string) return false;

Now we define a variable containing each of the characters we allow in the subject field:
var Chars = "0123456789-";

Using a "for" loop, we check each character to see if it is one of the characters in our allowed set. The parameters of the "for" initialize a variable to zero (which we'll use as an index to the characters in our subject field); check to see if the variable is less that the length of our subject field, continuing with the looped code if it is and dropping out (to the instruction following the closing curly-brace) if it is not; and increment our index variable by one:
for (var i = 0; i < string.length; i++)

The test in our "for" loop checks our current character position "string.charAt(i)" to see if it is contained in our permitted set. Using the "indexOf" method of our allowable characters variable "Chars" causes the JavaScript to scan along the field for a matching character. When there is a match, "indexOf" gives a value representing the character's position -- for example, if the character was a 2, "indexOf" gives a value of 3 because 2 is the third character in our set. If there is no matching character, "indexOf" gives a value of -1 indicating "not found". If this "not found" error condition occurs, we drop out of our function with a "false" return:
{ if (Chars.indexOf(string.charAt(i)) == -1)
return false;
}

When we have tested all the characters in our input string ("i" is no longer less than "string.length") and we have not yet dropped out of our function with an error ("return false;") we have passed the test and our input contains only characters that are members of our permitted set. We now return indicating that all is well:
return true;

This example, which requires JavaScript 1.2, uses a "regular expression" to compare each character position of the input field to a permitted range:

<SCRIPT LANGUAGE="JavaScript1.2"><!--
function regular(string) {
if (string.search(/^[0-9][0-9][0-9]\-[0-9][0-9]\-[0-9][0-9][0-9][0-9]$/) != -1)
return true;
else
return false;
}
//--></SCRIPT>

Regular Expressions can get complicated to understand and use until you get to know them well. For now, you could use this example as a model. The "search" method checks each character position of "string" to a defined range. "[0-9]" allows that position to be a numeric character in the range zero through nine. "\-" allows the literal character hyphen. "$/" ends the permitted string to make sure there are no more characters. Note that if the input string is too short, a null would not meet the criterion for one of the positions and would cause an error. When there is no failure of the test ("!= -1") we return true, else we return with an error condition ("false")

I hope these explanations give you a little insight into the working of JavaScript as well as providing you with a model for some field validation you might need.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date