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.