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>

Here is the plain HTML for the form:

<form method="POST" onSubmit="return verifyForm(this);">
Username<input type="text" name="name"><div id="usernameMsg" style="display:none;"><span style="color:red;">Please fill in your username.</span></div>
<br>
Email<input type="email" name="email"><div id="emailMsg" style="display:none;"><span style="color:red;">Please fill in your email.</span></div>
<br>
<input type="submit" value="Submit">
</form>

Notice that the error warnings such as the Please fill in your username. or Please fill in your email. have already been preloaded but hidden from the viewer by setting the display attribute to none. If the user submits the form with one or more of the fields blank, 4 things will happen to notify the user (Note: I tried to squeeze in as many warning events as possible just for demonstration purposes so I apologize if it is a bit over the top):

1. the background of the missing input field will turn yellow
2. a red border will appear around the missing input field
3. the hidden error message will become visible
4. an alert will pop up notifying the user that 1 or more fields are missing

When the user clicks on the Submit button, the onSubmit event gets triggered and executes the verifyForm() JavaScript function. If the onSubmit event returns a false value, the form does not get submitted. This value is determined by the verifyForm() function, which returns true if all fields are filled in and returns false if one or more fields are missing.

Here is a peek at the JavaScript verifyForm() function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

function verifyForm(form) {
    var userName = form.name.value;
    var userEmail = form.email.value;
    var success = 1;
    if (!userName) {
        document.getElementById("usernameMsg").style.display = "block";
        form.name.style.backgroundColor = "yellow";
        form.name.style.border = "3px red solid";
        success = 0;
    }
    else {
        form.name.style.backgroundColor = "";
        form.name.style.border = "";
        document.getElementById("usernameMsg").style.display = "none";
    }
    if (!userEmail) {
        document.getElementById("emailMsg").style.display = "block";
        form.email.style.backgroundColor = "yellow";
        form.email.style.border = "3px red solid";
        success = 0;
    }
    else {
        form.email.style.backgroundColor = "";
        form.email.style.border = "";
        document.getElementById("emailMsg").style.display = "none";
    }
    if(!success) {
        alert("The form is incomplete.  Please read the error message(s).");
        return false;
    }
    else {
        alert("The form was submitted succesfully!");
        return true;
    }
}

Lines 5-15 checks to see if the username field is blank or not. If the field is blank, it uses the DOM to access the div that is holding our warning message to the user and sets the display attribute to block (line 6). This makes the message visible to the user.

Next, it accesses the input text field and dynamically changes the backgroundColor attribute to yellow (line 7).

Then, it accesses the input text field again and dynamically changes the border attribute to 3px red solid (line 8). Here is a quick breakdown of the attribute we just used:

• 3px – the width of the border
• red – the color of the border
• solid – the style of the border

Finally, it sets the success variable to 0 which is equivalent to a false value (line 9). We will use this variable later on to decide if the form is ready to be submitted or not.

The else statement in lines 11-14 just resets all the styling back to the default values. This is for the case where a user is resubmitting the form so we want to remove all the warnings just in case they were activated from any previous submissions.

Lines 16-26 does the same exact thing except it is for the email text input field. Remember, all we are doing in this example is checking to see if the field is empty or not. This is to keep the code simple.

Line 27 checks the success variable to see if it had been set to false. If so, an alert is executed telling the user that one or more fields were missing and to check the error messages (line 28). Then it returns a false value to prevent the form from being submitted (line 29).

If the form has been filled-in completely, the else block gets executed in lines 31-34. In this case, an alert is executed saying that the form was submitted successfully. As a resutl, the function returns the value true which then submits the form.