///Form Input Validation and Correction

Form Input Validation and Correction

Form Input Validation and Correction

Your website visitors sometimes type their name in all capital letters. Or all lower case. And when you manually correct the case, there is danger of introducing typographical errors.

This article will show you how to fix that — and without paying a programmer to modify your CGI program.

And another thing: You know how annoying it is when you click a “submit” button, wait for the next page to appear, and then all you get is the message, “your email address is incorrect!”

Wouldn’t it be nice to alert your visitors to errors before they click your submit button? Today you learn how.

Note: This article contains both JavaScript and HTML code. If you are reading this on an HTML-enabled email program, you may need to “view source” for all the code to be visible.

As an alternative, you may view this article in the archives (which will present the code correctly in your browser). Or you may wish to grab the source code from the demonstration page. The archives are at http://willmaster.com/possibilities/archives/ and the demonstration page is at http://willmaster.com/possibilities/demo/formcheck.shtml

JavaScript is line-break sensitive. If you install the code and it doesn’t work, your email may have wrapped sensitive lines. Go to one of the URLs in the above paragraph and compare the line breaks.

Here is a skeleton form we will use in this article:

<form name="dForm" method="POST" action="script.cgi">

Your Name:
<input onBlur="CheckName(document.dForm.name.value)" name="name" type="text">
Your Email Address:
<input onBlur="CheckEmail(document.dForm.email.value)" name="email" type="text">
<input onClick="return ValidateAll()" type="submit" value="Send">
</form>

Notice that the form has a name. That’s the name=”dForm” element of the <form… tag. In order for these JavaScript functions to work correctly, they must know the name of the form who’s data they are manipulating.

In the input field tag asking for the visitor’s name, you’ll notice an onBlur=”CheckName(document.dForm.name.value)” element. If you don’t want the name validated and corrected, don’t include this element.

So you have better understanding in case you want to modify your code, let’s talk about each part of that element.

onBlur=”…”

onBlur is JavaScript code which activates what is between the quotes whenever the item blurs. An item blurs when the cursor leaves it, such as when another field or the submit button is clicked.

CheckName()

CheckName() is the name of the function which validates and corrects your visitor’s name. (The function name for checking the email address is CheckEmail().) The function must know what data it is to work on, and it finds that out by what’s inside the parentheses:

document.dForm.name.value

document

Do not change this. It is a reference to the current web page.

dForm

dForm is the exact name of this form. Ensure it matches what is between the quotes of the name=”______” element of your <form… tag.

name

name is the exact name of this particular form field. Ensure it matches what is between the quotes of the name=”______” element of your applicable <input… tag.

value

Do not change this. It is a reference to the contents of this particular form field.

With the above, the functions know what data to work on and where to place the results.

The email form field has similar elements.

In the <input… tag with the type=”submit” element (the submit button), there is an onClick=”return ValidateAll()” element. It checks each form field which is listed in the function. This can seem redundant, because the fields were already checked when they blurred. However, it is possible to get an error message and not fix it. In that case, it will be caught when the user clicks the submit button.

Your situation might not require using both:

To validate the form fields as soon as your visitor is finished typing in each field, but eliminating the validation when the submit button is clicked, keep the onBlur=”…” elements and remove the onClick=”…” element.

To validate the form fields only when your visitor clicks on the submit button, keep the onClick=”…” element and remove the onBlur=”…” elements.

Fixing your form is one step. The other step is placing the functions onto your webpage.

Here are the five necessary functions. Place them on your page between the <head> and </head> tags. (The functions are explained below.)

<script language="JavaScript">

<!--
function ValidateAll()
{
if(CheckName(document.dForm.name.value) == false) return false;
if(CheckEmail(document.dForm.email.value) == false) return false;
return true;
}

function StripSpacesFromEnds(s)
{
// developed by willmaster.com
while((s.indexOf(' ',0) == 0) && (s.length > 1))
{
s = s.substring(1,s.length);
}
while((s.lastIndexOf(' ') == (s.length - 1) && (s.length > 1)))
{
s = s.substring(0,(s.length - 1));
}
if((s.indexOf(' ',0) == 0) && (s.length == 1)) s = '';
return s;
}

function IsItPresent(s,explanation)
{
// developed by willmaster.com
s = StripSpacesFromEnds(s);
if(s.length) return s;
alert('Please enter ' + explanation + '.');
return '';
}

function CheckName(s_name)
{
// developed by willmaster.com
s_name = IsItPresent(s_name,'your name');
if(! s_name) return false;
var i = s_name.indexOf(' ',0);
while(i > -1)
{
s_name = s_name.substring(0,(i + 1)) +
s_name.substring((i + 2),s_name.length);
i = s_name.indexOf(' ',0);
}
s_name = s_name.toLowerCase();
var s = new String(s_name.substring(0,1));
s = s.toUpperCase();
s_name = s + s_name.substring(1,s_name.length);
i = s_name.indexOf(' ',0);
if(i == (s_name.length - 1)) i = -1;
var ts = new String("");
var j = 0;
while(i > -1)
{
i++;
j = i + 1;
s = s_name.substring(i,j);
s = s.toUpperCase();
ts = '';
if(i > 0) ts = s_name.substring(0,i);
s_name = ts + s + s_name.substring(j,s_name.length);
i = s_name.indexOf(' ',j);
if(i == (s_name.length - 1)) i = -1;
}
document.dForm.name.value = s_name;
return true;
}

function CheckEmail(s_email)
{
// developed by willmaster.com
s_email = IsItPresent(s_email,'your email address');
if(! s_email) return false;
var i = s_email.indexOf(' ',0);
while(i > -1)
{
s_email = s_email.substring(0,i) +
s_email.substring((i + 1),s_email.length);
i = s_email.indexOf(' ',0);
}
document.dForm.email.value = s_email;
if((s_email.length < 6) ||
(s_email.indexOf('@',0) < 1) ||
(s_email.lastIndexOf('@') != s_email.indexOf('@',0)) ||
(s_email.lastIndexOf('@') > (s_email.length - 5)) ||
(s_email.lastIndexOf('.') > (s_email.length - 3)) ||
(s_email.lastIndexOf('.') < (s_email.length - 4)) ||
(s_email.indexOf('..',0) > -1) ||
(s_email.indexOf('@.',0) > -1) ||
(s_email.indexOf('.@',0) > -1) ||
(s_email.indexOf(',',0) > -1))
{
alert('The email address "' + s_email + '" is not valid.');
return false;
}
return true;
}
// -->
</script>

The above functions depend on each other. ValidateAll() uses CheckName() and CheckEmail(). Both CheckName() and CheckEmail() use StripSpacesFromEnds() and IsItPresent(). IsItPresent() uses StripSpacesFromEnds().

StripSpacesFromEnds() does what it’s name implies; it removes any leading and trailing spaces from whatever your user typed into the form input field.

IsItPresent() determines whether or not anything has been typed into the form field. First it uses StripSpacesFromEnds(), then it looks to see if anything is left.

CheckEmail() determines whether or not the email address is formatted correctly. First, it uses IsItPresent() to see if anything has been typed into the form field. If not, an error message is delivered. Then it removes any other spaces which might be present. Finally, it checks the email formatting for:

Must be at least 6 characters long. (Shortest correctly formatted email address is a@a.aa)

• There must be exactly 1 “@” character.

• The “@” may not be the first character.

• At least 4 characters must follow the “@” character.

• There must be a period as either the third or fourth character from the end. (If there is more than one period in the address, this must be the last one.)

• There may be no consecutive periods.

• No period may be adjacent to the “@” character.

• There may be no commas.

If any of the above fail, CheckEmail() delivers an error message.

CheckName() uses IsItPresent() to see if anything has been typed into the form field. If not, an error message is delivered. Then it removes all but one of any consecutive spaces. Finally, it capitalizes the first letter of each name and makes everything else lower case.

ValidateAll() uses CheckEmail() and CheckName() to validate and correct the data in the related form input fields.

Other validation and correction functions will be added to the demonstration page from time to time. A function for URLs is already there, but not included in this article because of space considerations. Visit http://willmaster.com/possibilities/demo/formcheck.shtml to pick it up.

As other validation and correction functions are added to the page, they will be mentioned in the “Prelude” section of WillMaster Possibilities.

Have fun, and write to me if you need help.

2010-05-26T11:34:34+00:00 April 16th, 2005|JavaScript|0 Comments

About the Author:

Leave A Comment