Verifying Two Form Fields Have Identical Content

Probably you have seen forms with two fields that must contain identical information. An email address or a phone number are examples.

JavaScript then compares the two fields to verify they are identical.

The technique is generally implemented when it is very, very important that certain information on a form is correct.

It's not foolproof. Some people will realize it is less work to copy from one field and paste into another than it is to retype the information. And the browser will need to have JavaScript enabled to do the comparisons.

Yet, most form users are likely to type into the fields as you anticipate they will.

To implement, the two form fields to be compared need to be required fields. And then need an onchange attribute. Oh, yes, and also a JavaScript function on the page to do the comparing.

Implementing the Two-Identical-Fields Functionality

There are three steps to implement the functionality.

1. Make the two comparison form fields required.

   To make a form field required, add the required attribute to the field. No value is assigned. Just the wordrequired is needed.

2. Add an onchange attribute to each of the two fields. Here is an example for email fields.

   <input type="email" id="email1" onchange="CompareFields('email1','email2',true)">
   <input type="email" id="email2" onchange="CompareFields('email1','email2',true)">
   

   I'll address the onchange CompareFields(…) parameter values further below.

3. The JavaScript function CompareFields() needs to be available on the page. The function source code and information about where to place it are further below.

Example Fields

The two form fields below will alert you if they don't both contain identical information. The comparison is done when both fields are filled in and the browser knows you are done typing. (To tell the browser you are done typing, click or tap anywhere outside the field.)

This example compares case-insensitive. The letter "A" is considered to be identical to the letter "a". For your implementation, you can choose case-sensitive or case-insensitive comparisons.

Implementation

Let's put the JavaScript on the page first of all. Then it will be available for testing as soon as the form fields for comparing are ready.

<script type="text/javascript">
function CompareFields(f1, f2, caseinsensitive)
{
   var val1 = document.getElementById(f1).value;
   var val2 = document.getElementById(f2).value;
   if( caseinsensitive )
   {
      val1 = val1.toUpperCase();
      val2 = val2.toUpperCase();
   }
   val1 = val1.replace(/^\s*/,"");
   val1 = val1.replace(/\s*$/,"");
   if( val1.length == 0 ) { return; }
   val2 = val2.replace(/^\s*/,"");
   val2 = val2.replace(/\s*$/,"");
   if( val2.length == 0 ) { return; }
   if( val1 == val2 ) { return; }
   // An alert box is used for verification failures.
   // The message may be changed as appropriate for your installation.
   // Or, replace alert(...) with your preferred error message system.
   alert("The form fields need to be identical.");
}
</script>

The JavaScript can be pasted into the web page as is.

Later, if you wish, you can change the message of the alert box. Or you can replace the alert() function with code for triggering your preferred error message delivery system. (The alert() is at the bottom of the JavaScript function.)

Now, the two form fields that need to contain the same content.

<input type="text" id="field1" required onchange="CompareFields('field1','field2',true)">
<input type="text" id="field2" required onchange="CompareFields('field1','field2',true)">

Note the required attribute. It tells the browser the field is required so it is filled in before form submission can be accomplished.

Next, let's notice field1 and field2.

The first form field has id value field1. The second field has id value field2.

In both fields, the CompareFields() function reference has the same 3 parameters.

1. field1
2. field2
3. true

field1 and field2 are, of course, the id values of the two form fields.

The third parameter tells the function whether or not to compare with case-insensitive status. Currently, true, specifies that the comparison shall be made case-insensitive. If you don't want that, change true to false and the comparison will be done case-sensitive.

Good to Go

When the JavaScript and the two form fields are on the page, you should be good to go.

Verify it works as it should. When both of the form fields contain data, an alert should be seen if they are not identical. When case-insensitive comparison is made, an upper-case letter and the same letter as lower-case are considered identical.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager