Here is the plain HTML of the form. Please note that I have removed the action attribute because this is only a demo and we are only concerned with the client-side verification of the JavaScript function.

1
2
3
4
5
6
7

<form name="myform">
Email: <input type="text" name="email1">
<p><p>
Please type in your email again: <input type="text" name="email2">
<p><p>
<input type="button" onClick="verifyEmail();" value="Check Email Address">
</form>

Nothing exciting here except in line 6 where the onClick event is triggered when the user clicks on the button. This event will launch the verifyEmail() JavaScript function which will check the user input of the email address.

Here is the code for the verifyEmail() function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function verifyEmail(){
var status = false;     
var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
     if (document.myform.email1.value.search(emailRegEx) == -1) {
          alert("Please enter a valid email address.");
     }
     else if (document.myform.email1.value != document.myform.email2.value) {
          alert("Email addresses do not match.  Please retype them to make sure they are the same.");
     }
     else {
          alert("Woohoo!  The email address is in the correct format and they are the same.");
          status = true;
     }
     return status;
}

This function will return a false value if the user does not type in an email address in the correct format or if the user fails to type in the same email address in both fields. If the email addresses passes both these tests, then the function will return a true value.

The regex for validating the correct email format in line 2 has been borrowed and edited slightly by adding the i flag so that the regex is case-insensitive.

The if block in lines 3-6 checks to see if the email address in the first field passes the regex check by invoking the search() method on our email string value. This method accepts regex expressions as arguments to check the string and returns the position of the specified value in the string or a -1 if no match was found. If the search() method returns a -1, then an alert would tell the user that an invalid email address has been entered and returns a false value.

Lines 7-10 checks to see if the user has entered the same string in both email fields. This is done by a simple equality check on the string values. If the strings are different, an alert warns the user that the email addresses are not the same and returns a false value.

If we have passed the two tests, then else block in lines 11-14 gets executed. An alert tells the user that he or she has done a good job and the function returns a true value so that you can continue with the form submission.

Ideally, you would have this function run during the onSubmit attribute for the form tag. This way, the form will get submitted when the checkEmail() function returns a true value. Here is an example of how your form would look like:

1
2
3
4
5
6
7

<form name="myForm" method="POST" action="myTargetFile" onSubmit="return checkEmail()">
Email: <input type="text" name="email1">
<p><p>
Please type in your email again: <input type="text" name="email2">
<p><p>
<input type="submit" value="Submit">
</form>

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!