Email Address Validation

Email Address Validation Script

Using the string methods covered in the previous tutorial group, we can check to see if a form field contains a valid email address.

This sample email address validation script checks the email address for the format, "[email protected]", where x represents at least one character in that position, and the character(s) can be anything except "@" and adjacent "."'s. So the addresses, "[email protected]" and "[email protected]" are valid but "@jj.com", "j@@j.com", "j@jcom", "[email protected]", ".j@jcom" and "j@jcom." are not valid.

To execute validation when form is submitted, then either cancel or continue submit:

<form onsubmit="return checkEmail(this.email)">
<input type="text" name="email">
<input type="submit">
</form>

To execute validation when mouse moves out of text field (does not intervene with submittal process):

<form>
<input type="text" name="email" onblur="checkEmail(this)">
</form>

To execute validation when an image is used to submit the form::

<form name="imageForm">
<input type="text" name="email">
<a href="javascript:submitForm()"><img src="../images/submitImg.gif" border="0"></a>
</form>

Notice I did not use a form input type of image. Instead, I wrapped an image in <a> tags containing a call to a separate function, ensuring that older browsers submit the form properly. The function, "submitForm()", that is invoked when the image is clicked on, contains the built-in form method, "submit()".

function submitForm(){

var myForm = document.imageForm
var eField = myForm.email

if(checkEmail(eField) != false){ //invoke validation function and if all tests pass, submit form
myForm.submit()
}

}

Here is the Email Validation Script in its entirety:

function checkEmail(emField){ //reference to email field passed as argument

var fieldValue = emField.value // store field's entire value in variable

// Begin Valid Email Address Tests

//if field is not empty
if(fieldValue != ""){
var atSymbol = 0

//loop through field value string
for(var a = 0; a < fieldValue.length; a++){

//look for @ symbol and for each @ found, increment atSymbol variable by 1
if(fieldValue.charAt(a) == "@"){
atSymbol++
}

}

// if more than 1 @ symbol exists
if(atSymbol > 1){
// then cancel and don't submit form
alert("Please Enter A Valid Email Address")
return false
}

// if 1 @ symbol was found, and it is not the 1st character in string
if(atSymbol == 1 && fieldValue.charAt(0) != "@"){
//look for period at 2nd character after @ symbol
var period = fieldValue.indexOf(".",fieldValue.indexOf("@")+2)

// "." immediately following 1st "." ?
var twoPeriods = (fieldValue.charAt((period+1)) == ".") ? true : false

//if period was not found OR 2 periods together OR field contains less than 5 characters OR period is in last position
if(period == -1 || twoPeriods || fieldValue.length < period + 2 || fieldValue.charAt(fieldValue.length-1)=="."){
// then cancel and don't submit form
alert("Please Enter A Valid Email Address")
return false
}

}
// no @ symbol exists or it is in position 0 (the first character of the field)
else{
// then cancel and don't submit form
alert("Please Enter A Valid Email Address")
return false
}
}
// if field is empty
else{
// then cancel and don't submit form
alert("Please Enter A Valid Email Address")
return false
}

//all tests passed, submit form
alert("VALID EMAIL ADDRESS!")
return true
}

// The below function is needed only when using an image to invoke the function
NOTE: the form in the example is named, "imageForm" and the field is named, "email". Either name your form and field the same or change the references in the script below to reflect your form and field names.

function submitForm(){
var myForm = document.imageForm
var eField = myForm.email
if(checkEmail(eField) != false){
myForm.submit()
}

}