JavaScript Form Validation

 

The form you'll work with is quite simple. It will be used only for your visitors to leave their name, email address and some comments. They will be invited to say what they liked about the site, and what they didn't like. This will be done with check boxes. The form we're going to use can be copied to your own computer by clicking the link below. When the web page loads, save a copy to your hard drive. So load it up and let's do some coding.

Click here to see and save the Form

When the Submit button on the form is clicked, we'll use functions to validate the form. If we detect anything not quite right, we'll invite the user to try again. If the form is OK, we'll send it to an email address.

The first thing to do is to set up a function to handle the onSubmit event. This function will call other functions: one function to check the Name text box, one to check the email address, and so on. So open up the code for the form. Notice the names of our form elements:

Form Name: f1
Name textbox: Name
Email textbox: Email
Comments text area: Comments
Likes Checkboxes: Liked
Dislikes Checkboxes: Hated

Submit Button Event: Validate()

And here's the function for the Submit event:

function Validate() {

Message = ""
Message = Message + CheckName()
Message = Message + CheckEmail()
Message = Message + CheckComments()
Message = Message + CheckLikes()
Message = Message + CheckHates()

if (Message == "") {
return true
}
else {
alert(Message)
return false
}
}

All we're going to be doing is building up a variable called Message. At the start, Message is set to a blank string:

Message = ""

If, after all our functions have been called, Message is still a blank string, then no errors have occurred. If no errors have occurred, we can set return to true. Setting return to true will ensure that the form gets sent. If an error has occurred, then a function will insert some text into the Message variable. If Message contains any text, then return gets set to false. When return is false the form doesn't get sent, and the message itself will be displayed in an alert box:

if (Message == "") {
return true
}
else {
alert(Message)
return false
}

Look at the lines that call the functions, though. Here's the first one, the function that checks the Name textbox:

Message = Message + CheckName()

So we're saying "Put into the variable Message the value returned from the function CheckName(). Keep what was originally in the variable Message." Here's the function to add to your code:

function CheckName() {
UserName = document.f1.Name.value

if (UserName == "") {
Message = "Something's wrong with your name" + "\n"
}
else {
Message = ""
}
return Message
}

First, we put the value from the Name textbox into a variable called UserName:

UserName = document.f1.Name.value

Then we have an if statement to check what is inside of UserName. If the textbox is blank then the user hasn't entered a name, and the variable UserName will be a blank string. In which case it's an error. If there is something in the textbox then no error has occurred and we can set the Message variable to a blank string.

if (UserName == "") {
Message = "Something's wrong with your name" + "\n"
}
else {
Message = ""
}

Finally, we tell the function to return whatever is inside the Message variable:

return Message

So after the first function call we'd really have either this:

Message = "Something's wrong with your name" + "\n"

Or this:

Message = ""

If it's the first one, the form won't get sent; if it's the second one, then the user filled the name in correctly.

In the next part, we'll continue with the functions on our form. We'll tackle email addresses next.

Move on to the Next Part-->

<--Back to the JavaScript Contents Page