Page-Embedded Form Error Message (Instead of Alert Box)

An alert message box to let the user know about an error in filling out a form is workable. But it's not the most elegant way to present the information.

It takes an extra click or tap to dismiss the alert box before the error can be corrected. With the box gone, the user needs to remember what the message was in order to correct the error.

A more elegant method is to present the error message on the page itself, embedded in the page.

No clicking or tapping is required to get rid of it. The message continues to be available in case the user needs to refer to it while correcting the error.

This article is an "alert box to page-embedded error message" conversion guide.

The Alert Box to Embedded Message Conversion Steps

If you already have an error message system that uses the JavaScript alert() function to present messages, you may be able to convert to a page-embedded method fairly easily.

It depends on the JavaScript, of course. Some implementations are easier to work with than others. If you're converting a form that uses any of our commercial form handling software, we're happy to assist at no charge.

These are the steps:

1. Make a div or other HTML container to hold the error message.

2. Add two functions to your JavaScript:

   1. A function to insert the error message into the container and display it.

   2. A function to remove the error message from the container and undisplay it.

3. In your current JavaScript, call the "remove error message" function before error checking is done.

4. In your current JavaScript, replace the function name "alert" to the name of the "insert error message" function.

Before describing how to convert from alert() to a page-embedded method, let me say this. Use JavaScript for your visitor's convenience, but your form processing software should still do error checking at the server side — to catch errors made by those with JavaScript turned off.

An Example Conversion as the Guide

I'll use a before and an after example for the conversion guide.

The before is a form with an alert box to display the error message. The after is the completed conversion to embed the error message into the page.

Because they are examples, the forms won't submit. But they'll provide an error message whenever the submit button is clicked and the content of the email field doesn't pass a rudimentary email formatting check.

Here's the first form, the one that uses an alert box for the error message. Give it a try.

Here's the source code of the form and the JavaScript. It will be referred to when describing the conversion process.

<form>
<p>
Email Address:<br>
<input type="text" id="email-address" name="email" style="width:200px;">
</p>
<input type="submit" value="Submit Form" style="width:200px;" onclick="return ErrorCheck()">
</form>

<script type="text/javascript">
function ErrorCheck()
{
   var email = document.getElementById("email-address").value;
   if( ! email.length )
   {
      alert("The email address is required.");
      return false;
   }
   if( ! email.match(/\w@\w+\.\w/) )
   {
      alert("The email address appears to be invalid.");
      return false;
   }
   return true;
}
</script>

What's important to note in the above code is the alert function names in two places, both colored blue. Those will be changed when the conversion is made.

Here's the second form, the one with a page-embedded error message. Give it a try.

Here's the source code of the form and the JavaScript. It will be referred to when describing the conversion process.

<form>
<p>
Email Address:<br>
<input type="text" id="email-address" name="email" style="width:200px;">
</p>
<p id="my-error-message-container" style="display:none; border:1px solid red; color:red; background-color:yellow; font-weight:bold; padding:5px; width:188px;"></p>
<input type="submit" value="Submit Form" style="width:200px;" onclick="return ErrorCheck()">
</form>

<script type="text/javascript">
function RemoveErrorMessageFromPage()
{
   var IDofContainer = "my-error-message-container";
   document.getElementById(IDofContainer).innerHTML = "";
   document.getElementById(IDofContainer).style.display = "none";
}

function InsertErrorMessageIntoPage(content)
{
   var IDofContainer = "my-error-message-container";
   document.getElementById(IDofContainer).style.display = "";
   document.getElementById(IDofContainer).innerHTML = content;
}

function ErrorCheck()
{
   RemoveErrorMessageFromPage();
   var email = document.getElementById("email-address").value;
   if( ! email.length )
   {
      InsertErrorMessageIntoPage("The email address is required.");
      return false;
   }
   if( ! email.match(/\w@\w+\.\w/) )
   {
      InsertErrorMessageIntoPage("The email address appears to be invalid.");
      return false;
   }
   return true;
}
</script>

You'll see some colored text in the above code. They are referred to in the guide below.

Guide for Converting from alert() to Page-Embedded Error Messages.

The guide below is step by step. It describes how the example was converted from an alert() to a page-embedded error message system. Refer to the guide when converting your own forms.

Here are the steps:

1. Make a div or other HTML container to hold the error message.

   In the example, a p tag, colored green, was inserted into the form above the source code for the submit button. The p tag is an HTML container because it can contain content between it's opening and closing tags. The JavaScript will insert the error message into the container when appropriate.

   The p tag could instead be a div tag or span tag or any other HTML container.

   In the example, the container's CSS style is inline. The display:none; declaration must remain as an inline style, but the rest may be moved to a style sheet.

   The p tag container also has an id value colored purple, which will be referred to in the next step.

2. Add two functions to your JavaScript

   Two functions were inserted into the script tag, both colored green, RemoveErrorMessageFromPage() and InsertErrorMessageIntoPage(). The functions do what their names imply, remove and insert the error message into the HTML container on the page.

   Each of the functions has a place to specify the id value of the green colored HTML container of the previous step. The places to specify the id value are colored purple, like the id value of the HTML container.

   The ID values in the HTML container and in the JavaScript functions need to be identical.

3. Call the "remove error message" function before error checking is done.

   A function call was inserted as the first line of the ErrorCheck() function to call the remove message function, RemoveErrorMessageFromPage(). The line is colored green.

4. Replace the function name "alert" to the name of the "insert error message" function.

   Each alert function name was replaced with the insert error message function name, InsertErrorMessageIntoPage. The two places the replacement was made in the example are colored blue.

Those are the steps taken to convert the example from an alert message to a page-embedded message system.

Most forms with JavaScript error messages can be converted similarly. Use the example as a guide.

The page-embedded error message system is more elegant and user friendly than an alert box error message system.

(This article first appeared in Possibilities ezine.)

Will Bontrager