Free Javascript Tutorials

home

JavaScript Tutorials

Form Validation continued

 
Our quick javascript links
Little Programmes
 
 
 
 
 
 

 

Using JavaScript to Validate an Email Address

 

Checking for a valid email address is a little more difficult. We have to make sure that the user typed an "at" sign ( @ ). But we also have to make sure that there's "dot" something at the end: .com, .co.uk, .net or whatever.

But we also have to check that these are in the right place. If we don't, then the user could enter this:

My.com@FooledYou

instead of something like this:

FooledYou@MyISP.com

In order to check the email address, we can use the in-built JavaScript functions indexOf() and its brother function lastIndexOf(). The syntax for the functions is this:

stringName.indexOf(searchValue, [fromIndex])

Here's an example:

Email = "FooledYou@MyISP.com"
AtPos = Email.indexOf("@")

Email is the String Name, the text we want to search. The function indexOf() will then search that text for you. But you have to tell it what to search for. In the example, we told it to search for an "at" sign ("@"). We could have told the function what position in the string to start the search [fromIndex]. But you can leave that out if you want to search all the string. The function will then start the search from the beginning of your string.

If the function indexOf() finds our "at" sign, it will return a number. The number is the position in the string where the "at" sign was found. If it doesn't find it, minus one (-1) will be returned.

The related function lastIndexOf() does exactly the same thing, except it starts the search from the last character in your string and works backwards.

Let's build our function to check for a valid email address. We can start with this:

function CheckEmail() {

email = document.f1.email.value
AtPos = email.indexOf("@")
StopPos = email.lastIndexOf(".")

if (AtPos == -1 || StopPos == -1) {
Message = "Not a valid email address"
}

}

We start by passing the email address from the text box to a variable called email:

email = document.f1.email.value

We then use the indexOf() function to check if the email contains an "at" sign:

AtPos = email.indexOf("@")

We can then use the lastIndexOf() function to get the position of the last full stop:

StopPos= email.lastIndexOf(".")

If the two functions have found something, the two variable AtPos and StopPos will both contain numbers greater than minus one (-1). We add an if statement to check what is inside of these two variables:

if (AtPos == -1 || StopPos == -1) {
Message = "Not a valid email address"
}

In the if statement, we're saying "if the variable AtPos has a value of -1 OR ( | | ) if the variable StopPos has a value of -1 THEN put some text into the variable Message. Set the return value of the function to false."

Remember: the OR operator (| |) will return a value of true if any one of its conditions are met. When an if statement is true, the code inside the curly brackets will get executed.

OK, once we're satisfied that the email does contain an "at" sign and a full stop, we can add another if statement to check whereabouts these two symbols are in the email address. We don't want the user to enter something like this:

My.com@FooledYou

In the above email address, there is a full stop and an "at" symbol. So the function lastIndexOf() will have returned the position of the last full stop, and the function indexOf() will have returned the position of the "at" sign. However, the email address is not a proper email address. We can prevent this error with our second if statement:

if (StopPos < AtPos) {
Message = "Not a valid email address"
}

The variable StopPos is recording the position of the last full stop in the email address. If this position is less than the position of the "at" symbol, then we have an error. In which case the Message variable will contain some text.

Another thing we can check for is this type of error:

FooledYou@.com

In the address above, the last full stop comes after the "at" sign. Our two previous if statement will not have picked this up. However, the email address is still invalid: there is no address to send it to! We can add another if statement to check for this:

if (StopPos - AtPos == 1) {
Message = "Not a valid email address"
}

The above if statement will check the numerical difference between the full stop position and the "at" position. If the difference is only 1, then we've caught the error.

And that's about it for our email checker. There are still one or two things you'd need to check about the email address. These two addresses for example will slip through the net:

@FooledYou.com
Me@FooledYou.

So you might want to (and should now be able to) write if statements to check for these errors.

function CheckEmail() {
email = document.f1.Email.value
AtPos = email.indexOf("@")
StopPos = email.lastIndexOf(".")
Message = ""

if (email == "") {
Message = "Not a valid Email address" + "\n"
}

if (AtPos == -1 || StopPos == -1) {
Message = "Not a valid email address"
}

if (StopPos < AtPos) {
Message = "Not a valid email address"
}

if (StopPos - AtPos == 1) {
Message = "Not a valid email address"
}

return Message
}

We've added another if statement to the function. All it does is check to see if there is anything in the email text box at all:

if (email == "") {
Message = "Not a valid Email address" + "\n"
}

A new line character has also been added ("\n" ).

In the next part, we'll see how to validate and return checkboxes values.

Move on to the Next Part-->

<--Back to the JavaScript Contents Page