Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMaster > LibraryManaging Website Forms

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

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.

Form field comparison example

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

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC