<script language="JavaScript">
// Removes all characters which are not digits
// from a string
function numericOnly(sString)
{
var sNumericOnly = "";
var sValidChars = "1234567890";
for (var iCharPos = 0; iCharPos <
sString.length; iCharPos++)
{
if (sValidChars.indexOf(sString.charAt(iCharPos))
!= -1)
{
sNumericOnly
= sNumericOnly + sString.charAt(iCharPos);
}
}
return sNumericOnly;
}
|
Note
that if we didn't have to worry about version 3 browsers, we could make good
use of the version 4 browsers' support for JavaScript 1.2 and replace the
function with the line:
sString = sString.replace(/(\D)+/g,"")
|
Visual
Basic developers will recognize the next function we create which trims all
white space – tab, space, and line feed – characters from the beginning
and end of a string. In effect this is the JavaScript equivalent of the VB trim
statement.
Our
trim
function works by looping through from the start of the string checking each
character to see if it's white space or not. If it hits a non-whitespace
character it breaks out of the loop and we have found the start of the valid
string. The same algorithm, but starting from the end of the string, finds the
last valid character at the end of the string.
// Removes all whitespace characters
// from start and end of a string
function trim(sString)
{
sTrimmedString = "";
if (sString != "")
{
var iStart = 0;
var iEnd = sString.length - 1;
var sWhitespace = "
\t\f\n\r\v";
while (sWhitespace.indexOf(sString.charAt(iStart))
!= -1)
{
iStart++;
if (iStart
> iEnd)
break;
}
// If the string not just
whitespace
if (iStart <= iEnd)
{
while (sWhitespace.indexOf(sString.charAt(iEnd))
!= -1)
iEnd--;
sTrimmedString = sString.substring(iStart,++iEnd);
}
}
return sTrimmedString;
}
|
Again, using regular
expressions and the string object's method, the whole function could be
achieved in two lines.
|
class=CodeForeground>sString =
sString.replace(/^[\s]+/g,"");
class=CodeForeground>sString =
sString.replace(/[\s]+$/g,"");
|
Our third function ensures
that the user has completed all the form elements. It loops through each
element in the Form.Elements[]
collection, which can be abbreviated to Form[],
and if it's an text
or radio
element, it checks it has a value. For radio button groups we need to loop
though each radio button in the group and check to see if one has been
selected. The naming convention I have used for radio buttons is to prefix the
name with rad.
To let the user know which element has failed validation the name of the radio
button can be used with the rad
prefix removed to make it more readable.
// Checks all text boxes and radio button
groups
// have a VALUE entered
function checkCompleted(theForm)
{
var bRadioChecked;
var sElementGroupName;
var theElement;
// loop through all elements on form
for (var iElement = 0; iElement <
theForm.length;iElement++)
{
theElement = theForm[iElement];
// <INPUT
TYPE="TEXT">
if (theElement.TYPE ==
"text")
{
if (trim(theElement.VALUE)
== "")
{
alert("You must complete all the form details");
theElement.focus();
theElement.select();
return false;
}
}
// <INPUT
TYPE="RADIO">
else if (theElement.TYPE ==
"radio")
{
bRadioChecked
= false;
sElementGroupName = theElement.NAME;
// all radio
buttons in a group have the same NAME
// so loop
through all radio elements with same NAME
// until one
true or last one reached
while (theElement.NAME
== sElementGroupName)
{
if (theElement.checked == true)
{
bRadioChecked = true;
}
iElement++;
theElement = theForm[iElement];
}
if (bRadioChecked
== false)
{
// radio button names in form radCreditCard
// so just cut off first 3 characters
alert("Please select your " +
sElementGroupName.substring(3,sElementGroupName.length));
return false;
}
iElement--;
}
}
return true;
}
|
The final validation
routine checks our cboExpMonth
and cboExpYear
select elements that make up the card expiry date to see that the card
date has not already expired. However, we encounter a problem here in that the
values returned by the Date
object in JavaScript are particularly platform and browser dependent – some
browsers return 99
as the year, others the full 4 digits 1999.
Here we get round the problem by assuming the year 2000 if the value returned
by the getYear()
method is 0 or by simply adding 1900 if it's another value below 1900. Note
that if we were using JavaScript 1.3 (IE5, NC4.06+) or JScript5, the getFullYear()
method of the Date object would solve this problem.
