Identical Email Address Check

Subscription forms get many mis-typed email addresses. @gail for @gmail, as an example. And misspelling their name.

It is not catastrophic when they do. They just won't get the subscription.

But for some things, a mis-typed email address could be harmful — extending a drivers license, applying for an apartment, getting travel tickets.

There are several ways to make it more likely a form user has correctly typed an email address. One is to verify the address is properly formatted. Another is sending an email to the address they provided and requiring them to click on a link or reply to prove they got it.

A third method, the subject of this article, is to compare 2 email form fields. The check happens when the user has typed or pasted the same address in both fields.

It is done with JavaScript.

Although this article's focus is on verifying two email address fields are identical, the same JavaScript can be used for other data — telephone numbers, for example.

This JavaScript does not validate addresses. Nor does it make fields required. It only checks that two form fields contain identical information.

The two email address fields are compared when both fields contain information and the form user is done typing. (Done-typing is signaled by tapping on another field, the submit button, or anywhere else on the page.)

Demonstrating Functionality

Below is an example form. It won't submit, but the field-comparison feature is fully functional. After comparing, the result of the comparison is published immediately above the button.

Email Address 1:

Email Address 2:

Comparing the email address fields is case-insensitive. The name@ISP.com address is considered to be the same as the Name@isp.com address.

Functionality Demo Form Field Source Code

Let's put example form fields and a button on a test page. (We'll add the JavaScript in a moment.)

<p>
Email Address 1:<br>
<input 
   type="text" 
   id="email1" 
   onblur="VerifyDataIdentical('email1','email2')" 
   name="email1" 
   style="width:100%;">
</p>
<p>
Email Address 2:<br>
<input 
   type="text" 
   id="email2" 
   onblur="VerifyDataIdentical('email1','email2')" 
   name="email2" 
   style="width:100%;">
</p>

<p id="verification-result" style="display:none; border:1px solid #ccc; padding:.25em; border-radius:.25em;"></p>

<p>
<input type="button" style="width:100%;" value="Click">
</p>

The VerifyDataIdentical('email1','email2') onblur attribute for the two email fields call the JavaScript function with the id values of both fields. The JavaScript is called when the field becomes out of focus (anywhere else is tapped), which indicates the person is done typing in that field.

The p element with the verification-result id value will contain the "matched" or "unmatched" message the VerifyDataIdentical() function responds with. Notice that the style includes display:none; so the element won't show up until there is a message to put into it.

For testing this functionality, no form tags are required. For real forms, you would have them of course.

Now, let's put the JavaScript on the page so we can test the functionality.

The JavaScript

The JavaScript has a couple places that may be customized, if you wish to do so.

Here is the source code.

<script type="text/javascript">
function VerifyDataIdentical(d1,d2)
{
   var messageID = "verification-result";
   var IsIdenticalMessage = "Thank you. The two email addresses are identical.";
   var NotIdenticalMessage = "The two email fields must be identical.";
   var d1val = document.getElementById(d1).value.replace(/^\s*/,"");
   var d2val = document.getElementById(d2).value.replace(/^\s*/,"");
   d1val = d1val.replace(/\s*$/,"");
   d2val = d2val.replace(/\s*$/,"");
   var d = document.getElementById(messageID);
   if(d1val.length && d2val.length)
   {
      d1val = d1val.toLowerCase();
      d2val = d2val.toLowerCase();
      d.style.display = "block";
      if(d1val == d2val) { d.innerHTML = IsIdenticalMessage; return true; }
      if(d1val != d2val) { d.innerHTML = NotIdenticalMessage; return false; }
   }
   d.style.display = "none";
   return true;
}
</script>

The verification-result value is identical to the id value of the container to contain the "matched" or "unmatched" message the VerifyDataIdentical() function responds with. This value and the id value may be changed so long as the two remain identical.

The two blue texts are the messages to be placed into the container to contain the "matched" or "unmatched" message the VerifyDataIdentical() function responds with. The first is the message when both email addresses are present and identical. The second is the message when both email addresses are present but they are not identical. Change those two as you please.

Put the JavaScript on the web page. It can be put anywhere in the page source code where JavaScript can run. Immediately above the ending </body> tag is good.

Additional Functionality

The JavaScript VerifyDataIdentical() function also responds with true or false. The response is automatic. It responds with false only when both email fields contain data but they are not identical. Otherwise, it responds with true.

The form's submission can be blocked when VerifyDataIdentical() returns false.

To enable the blocking, use one of these methods.

1. EITHER, put this onclick value in the submit button tag:

   onclick="return VerifyDataIdentical('email1','email2')"
   

   Example submit button tag:

   <input type="submit" value="Form Button" onclick="return VerifyDataIdentical('email1','email2')">
   

2. OR, put this onsubmit value in the form tag:

   onsubmit="return VerifyDataIdentical('email1','email2')"
   

   Example form tag:

   <form action="https://example.com" onsubmit="return VerifyDataIdentical('email1','email2')">
   

The message the user gets when form submission is blocked is the same one they get when two email addresses are compared — within the container to contain the "matched" or "unmatched" message the VerifyDataIdentical() function responds with.

Two Functions

VerifyDataIdentical() has two functionalities. They are available when two form fields are compared and both contain information.

1. Insert a message into a p element (or other container, like a div element) within the form.

2. Return either true or false whenever it is called, which optionally may be used to block form submission.

The code in this article can come in handy when the email address provided on a form absolutely must be correct.

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

Will Bontrager