Instant Required Field Check

When a form is submitted, the form processing software on the server may check that all required fields contain information. When any are missing, the for user returns to the form and supplies the required information.

JavaScript can do an instant check when the form is submitted and prevent the submission if required fields are empty, along with an appropriate message.

No need to reload the form. Less hassle for the user.

Note that this system does not check that the information is valid, only that information is present.

Each form field to be checked needs an id. An id is assigned with id="___", the underscore replaced with a valid id. A valid id —

• starts with a letter,
• is composed only of letters and numbers, and
• is unique on the web page (no duplicate ids allowed on the page).

Example:

<input type="text" id="abc" name="address">

Make a list of the id values for each required field. You'll need them in this JavaScript:

<script type="text/javascript">
/* 
   Instant Required Field Check
   Version 1.0
   February 15, 2010

   Will Bontrager
   https://www.willmaster.com/
   Copyright 2010 Bontrager Connection, LLC

   Bontrager Connection, LLC grants you 
   a royalty free license to use or modify 
   this software provided this notice appears 
   on all copies. This software is provided 
   "AS IS," without a warranty of any kind.
*/
// Leave next line as is.
var ID_Message = new Array();

// // // // // // // // // // // //
// Configuration section:
//
// Below, list the id an error message for each required 
//    field in this format:
//       ID_Message["idvalue"] = "Error Message";
// Examples:
//       ID_Message["email"] = "Please provide email address.";
//       ID_Message["phone"] = "A telephone number is required.";
// If the message itself contains quotation marks, they 
//    need to be escaped with a preceding backslash 
//    character. Example:
//       ID_Message["nick"] = "Please provide your \"nick\" name.";

ID_Message["email"] = "Please provide email address.";
ID_Message["phone"] = "A telephone number is required.";
ID_Message["nick"] = "Please provide your \"nick\" name.";


// End of configuration section.
// // // // // // // // // // // //
function CheckAllRequiredFields() {
var message = new Array();
for(var k in ID_Message) {
   if(!document.getElementById(k).value.length) { message.push(ID_Message[k]); }
   }
if(message.length) {
   alert(message.join("\n\n"));
   return false;
   }
return true;
}
</script>

About 20 lines down, past the header and legalese section of the JavaScript, you'll see a configuration section.

In the configuration section, list each required field id value and the relevant error message to use if the field is empty. The JavaScript contains instructions on exactly how to list them.

The JavaScript can be put anywhere on the page, above or below the form, in the HEAD or BODY area.

Last, put an onsubmit="return CheckAllRequiredFields()" attribute into the form's form tag. Example:

<form onsubmit="return CheckAllRequiredFields()">

Here is a form using the above JavaScript exactly. (When all fields contain information and button is clicked, this page reloads.)

If interested in repeating the example, here is the form code.

<form onsubmit="return CheckAllRequiredFields()">
Email: <input type="text" name="email" size="20" id="email"><br>
Telephone: <input type="text" name="telephone" size="20" id="phone"><br>
Nickname: <input type="text" name="nickname" size="20" id="nick"><br>
<input type="submit">
</form>

To implement the system:

1. Assign a valid id to each required field.

2. Customize the JavaScript for each required field id.

3. Put an onsubmit="return CheckAllRequiredFields()" attribute into the form's form tag.

You now have an instant required field check.

Will Bontrager