The JavaScript Goodies Book

By Joe Burns

and Andree Growney Form Validation
From Chapter Nine: Putting It All Together

The Concept

     The HTML Goodies e-mail box is always receiving letters asking how to set up a form so that users have to fill in all the blanks. And furthermore, how can the form be set up so that the information the user enters is valid? The short answer is that you'll never be able to force someone to fill in your forms, or to fill them in correctly, but you can certainly take a shot at suggesting they do. This script will check for both empty fields and, to a point, check to see if the field is filled out correctly.


The Script

Click Here to See the Script


The Script's Effect

Click Here to Try It Out


Deconstructing The Script

As is usually done in the book, we'll begin deconstructing this script by starting at the bottom with the HTML form elements.

<FORM NAME="TheForm" METHOD=POST
ACTION="" onSubmit="return TheFormCheck()">

<b>Name: </b>
<INPUT NAME="name" SIZE=30 MAXLENGTH=34><BR>

<b>Email: </b>
<INPUT NAME="email" SIZE=30 MAXLENGTH=34><BR>

<b>Phone: </b>
<INPUT NAME="phone" SIZE=30 MAXLENGTH=34><BR>


<TEXTAREA NAME="TextBox" WRAP=VIRTUAL ROWS=8 COLS=48>
</TEXTAREA><BR>

<INPUT TYPE=SUBMIT VALUE="Submit"><INPUT TYPE=RESET>

</FORM>

     The entire form is named "TheForm". It's not a very clever name, but it'll do. Since this form is set up to mail the contents of the text boxes like a simple guestbook, we have also set the METHOD to POST and offered a spot for the action. That is where one would write in mailto:your@email.address.com.

     Notice the onSubmit= Event Handler, too. When this form is submitted, the contents of the entire form are to be returned to a JavaScript function named "TheFormCheck()". Then there are three text boxes for the user to enter his or her name, e-mail, and phone number. So we also made those three terms the names of the three boxes. Next is a TEXTAREA box named "TextBox", and finally a submit button to send the output of the form items.

     Okay, now we're up to speed on the HTML, let's go back up to the top and look at the JavaScript.

The Script

     The JavaScript is set up to take the information returned from the form and check it. The checking is done through a series of "if" statements.

     While we're moving through the JavaScript, be aware that the code that checks each form element is in the same order as the form elements themselves. The e-mail box is checked before the TEXTAREA box, and so on. That's important because we want any errors in filling out the form to appear in the same order as the boxes themselves. By checking the boxes in order, we will get that effect.

     But what should be checked? Should all text boxes be verified? That's up to you. Here you'll learn the basic process of how to set up a verification. It's up to you to then choose what topics the verification will look for. Sometimes you really need to be clever about what you're looking for.

     Below you'll see some rather interesting methods of checking to see if an e-mail address is valid or not.

Verifying the E-Mail and Phone Text Boxes

function TheFormCheck() {
if (document.TheForm.email.value==""
&& document.TheForm.phone.value=="") {
alert("It would be helpful to include both your name and email");
document.TheForm.email.focus();return false
}

     This first block of JavaScript will check the text boxes that receive the user's e-mail address and phone number. The code document.TheForm.email.value=="" is checking if the value of that specific form element is empty. Notice the double equal signs. The double ampersand means "and".

     Then the same format is followed again asking the text box whether or not the phone number is empty.

     There is an alert that will pop up if the condition is correct. Then the line document.TheForm.email.focus();return false. That line of code is triggered when the alert button is enacted. It basically states that focus should be put back on the form element e-mail. This disallows the sending of the form.

     Put it all together and the "if" statement reads, "if the e-mail and the phone text boxes are empty, then post an alert telling the user to enter some information and don't send the form." It's very efficient code.

Verifying the E-Mail Text Box Alone

     The purpose of the following block of script is to verify whether or not what is written in the text box is a valid e-mail address. By the way, you'll want to put everything in the first "if" { } statement on the same line as was shown in the script.

if (document.TheForm.email.value!="")
{if (document.TheForm.email.value.indexOf("@")==-1 ||
document.TheForm.email.value.indexOf(".")==-1 ||
document.TheForm.email.value.indexOf(" ")!=-1 ||
document.TheForm.email.value.length<6)
{alert("Sorry, your email address is not valid.");
document.TheForm.email.focus();return false}
}

     The format is an "if conditional" statement. But look at the condition. There are four checks made of the data put into the check box. In the check of the e-mail and phone text boxes above, there were only two conditions, so a double ampersand (&&) was sufficient. Here there are four, so you need to denote the conditions differently.

     The method is to place a double vertical line between each condition. That sets each condition apart in the browser's mind as a separate check, but also tells the browser to do each one. So each time the script is run, each of the four checks will be performed on the text returned from the e-mail text box. The code checks the input four different ways:

  • document.TheForm.email.value.indexOf("@")==-1

    This code checks whether or not the text includes the "@" sign, as all e-mail addresses will. The check is performed by checking if the number of "@" signs in the text is equal to negative one (-1). Negative one is used to represent no "@" signs, because what we're asking for here is an index of the number of "@" signs in the text. Remember that JavaScript counts everything and it starts counting at zero, so asking if there is a zero is the same as asking if there is a one. We use 1 to represent zero. It's a little confusing, but that's the method.

  • document.TheForm.email.value.indexOf(".")==-1

    This code checks to see if there are any dots (.) in the text, as there will always be in an e-mail address. Again, the negative one is equal to zero.

  • document.TheForm.email.value.indexOf(" ")!=-1

    This code makes sure that there are no empty spaces. Notice the "!=" meaning "not equal to". E-mail addresses will not have any spaces in them.

  • document.TheForm.email.value.length<6

    Finally, this code checks if the length of the email address is less that six characters. "Six" is checked because technically the smallest e-mail address would be X@XX.XX. For example, an e-mail address from Canada could be j@xx.ca.

     If all of the conditions are met, the script moves along to the next set of code. If the conditions are not met, then an alert box pops up stating that the e-mail address is not valid and focus is put on the e-mail box. That, again, stops the mail from being sent.

The TEXTAREA Box

     This code checks the TEXTBOX for any instances of the string "://". That would suggest that someone is putting in a Web page address. This is sometimes used to create spam e-mail using the server of the person receiving the e-mail. This check will stop that practice. Of course, it also stops people from sending you full Web addresses. It's up to you whether to use it or not.

if (document.TheForm.TextBox.value.indexOf("://")!=-1)
{
alert("The string :// is not allowed in the TextBox field.");
document.TheForm.TextBox.focus();return false
}

     If the condition is met, then an alert box pops up and focus is put upon the TEXTAREA box and the form does not send. If all the conditions are met, then the "if" statements are bypassed and the form does its job, sending the information off to the person who posted the form. The script can be altered and added to almost endlessly. You simply need to find clever methods of checking if the information entered is valid.

     Here's a suggestion: Try to add a text box that asks for a phone number. You could test that by asking if the input to the box is seven characters long or not. That would be a good one.

Back to the JavaScript Goodies Index Page


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