Friday, March 29, 2024

Validating Special Numbers

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.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured