Business Sites     

 Web Applications      Web Site Hosting      Search Engine     
CompanyWeb.net: Web Hosting, Internet Programming, Search Engine Optimization

 

 


   

CompanyWeb Articles

Book Reviews
Columns

Web-Source Topics...

Horse's Mouth
ProBizTips

CompanyWeb Search


 
Web Design Master Series Article

Web Design Master Series Article is syndicated from Web-Source.net.

Syndicated articles are written by independent authors and the contents represent the author's views. The content of the article does not necessarily represent the views of Company Web staff and management.

Master Series

Form Input Validation and Correction

By William Bontrager

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.html

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 /images 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.) 

------------- Functions begin on next line ---------------
<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>
------------ Functions end on previous line --------------

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 [email protected])

     ~~ 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.html 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.

About the Author:
Copyright 2003 Bontrager Connection, LLC
William Bontrager Programmer/Publisher, "WillMaster Possibilities" ezine mailto:[email protected]

Are you looking for top quality scripts? Visit Willmaster and check out his highly acclaimed Master Series scripts. Some free, some for a fee.

Content Provided By:

 
More Master Series Articles...

 

 

Frontpage, NT are Trademarks of Microsoft Corporation. CompanyWeb Site Copyright (c) 1998 - 2003, CompanyWeb.net Site Development Service Group.