Requiring Two Identical Email Addresses

Some forms require a person to type an email address a second time. Software then checks that the email addresses are the same.

The idea is that typing it twice is likely to catch a typographical error, email addresses being critical for communication.

Similar "type it twice" functionality can be applied to passwords or other information that must be correct when submitted.

Here is code is for a working example. Copy it and paste into a test web page to see it working.

<form 
   name="myform" 
   onsubmit="return ErrorCheck();" 
   method="post" 
   action="/cgi-bin/script.cgi"> 

<input 
   type="hidden" 
   name="identicalfields" 
   value="email,emailagain">

<p style="width:300px; text-align:right;">
Email 
<input type="text" name="email" size="22">
</p><p style="width:300px; text-align:right;">
Type again 
<input type="text" name="emailagain" size="22">
</p>
<p style="width:300px; text-align:center;">
<input type="submit">
</p>

</form>

<script type="text/javascript"><!--
function ErrorCheck() {
var formname = "myform";
var fieldwithlist = "identicalfields";
var er = new String();
var tempstring = eval("document."+formname+"."+fieldwithlist+".value");
if(tempstring.length > 1) {
   var idi = tempstring.split(',');
   var ts0 = eval("document."+formname+"."+idi[0]+".value");
   var ts1 = eval("document."+formname+"."+idi[1]+".value");
   if(ts0 != ts1) { er = 'The form field at "'+idi[0]+'" must be identical to the form field at "'+idi[1]+'".'; }
   }
if(er.length > 0) {
   alert(er);
   return false;
   }
return true;
}
//--></script>

The two email fields are name="email" and name="emailagain".

The value of a hidden field name="identicalfields" is a comma-separated list of the field names to compare: value="email,emailagain"

When the submit button is clicked, the JavaScript below the form will compare the two fields. If they are not identical, an alert box with an error message is spawned.

Near the beginning of the JavaScript is are places to specify the name of the form and the name of the hidden field with the comma-separated list. Should those change in your form, the JavaScript will need to know the new values.

Here is a working example, identical to the above except the action= URL in the form tag. Different content in the two fields will cause a JavaScript alert with an error message.

Note that the above live example will merely re-load this web page when the form is submitted with both fields identical. That is because the example form tag has no action= attribute.

When you need to confirm that two form fields contain identical information, this works a treat.

Will Bontrager