Ensuring Two Form Fields Have Identical Information

When two form fields must contain identical information before they can be submitted, this article shows you how to implement it.

A common implementation is for eliminating typographical errors in an email addresses.

The form asks the user to type an email address in two places. If they're not identical, the user is presented with an error message.

Another implementation is when specifying a password for future access. Here, a typographical error could prevent the user from accessing the area. Requiring the password to be re-typed reduces the chance for that type of error.

Whenever it's critical the information being provided is correct, you can ask the user to re-type it in a second form field. Those two fields can then be compared.

This article also shows how to check that two form fields are not identical.

Again using email addresses for an example, when the addresses of two friends are required, they can be checked to verify that the two are indeed different.

You'll find other uses for this, I'm sure.

The Form

Here is an example form that asks for two items of information:

<form 
   name="FormName" 
   method="POST" 
   action="/cgi-bin/script.cgi">
<input 
   type="text" 
   name="FieldA" 
   size="19" />
<input 
   type="text" 
   name="FieldB" 
   size="19" />
<input 
   type="submit" 
   onclick="return BothFieldsIdenticalCaseSensitive();" 
   value="Click Me" />
</form>

Note that the submit button field has an onclick attribute. The value in the attribute calls a JavaScript function. The function runs, then returns either the value "true" or the value "false."

If the "true" value is returned, the form is submitted. But if the "false" value is returned, the form submission is aborted.

The name of the JavaScript function in the above example is BothFieldsIdenticalCaseSensitive(). This name can be changed depending on which JavaScript function you wish to run when the submit button is clicked.

The JavaScript

This JavaScript code can be put into the HEAD or the BODY area of the web page. If in the BODY area, it should be somewhere above the form.

<script type="text/javascript" language="JavaScript">
<!--

function BothFieldsIdenticalCaseSensitive() {
var one = document.FormName.FieldA.value;
var another = document.FormName.FieldB.value;
if(one == another) { return true; }
alert("Oops, both fields must be identical.");
return false;
}

function BothFieldsIdenticalCaseInsensitive() {
var one = document.FormName.FieldA.value.toLowerCase();
var another = document.FormName.FieldB.value.toLowerCase();
if(one == another) { return true; }
alert("Oops, both fields must be identical.");
return false;
}

//-->
</script>

As you've noticed, the two JavaScript function names are BothFieldsIdenticalCaseSensitive() and BothFieldsIdenticalCaseInsensitive()

As the function names imply, one checks for identical information, case sensitive. The other checks for identical information, case insensitive.

To check with case insensitivity, the form field values are both converted to all lower case before the comparison is made. That's the only difference in the code of the two functions.

Specify the function name of your choice for the onclick value in the form's submit button field.

Integration Considerations

Form Name

The form's name in the example is "FormName", and the name is used in the JavaScript code, twice in each function. You'll find it in the JavaScript code with a period on each side of the name.

If you change your form's name, the name in the JavaScript must also be changed wherever it occurs.

To work with the JavaScript, the form's name must begin with an alphabet character. The rest of the name can be composed of any alphabet and/or number characters and/or underscore characters.

Field Names

The form field names in the example are "FieldA" and "FieldB". The field names are used in the JavaScript code, each field name once in each function. You'll find them in the JavaScript code with a period on each side of the names.

If you change either or both of your field names, the names in the JavaScript must also be changed wherever they occur.

The field names have the same restrictions as the form's name. They must begin with an alphabet character. The rest of the characters can be alphanumeric with the option of including underscore characters.

Alert Box Message

You may change the alert message in the JavaScript from "Oops, both fields must be identical." to something appropriate for your implementation. If your alert message includes quotation marks (other than the ones already at each end of the message), they must be escaped with a back slash. Example: \"

Form Fields with Un-Identical Information

To ensure that two form fields contain different instead of identical information, one change needs to be made in each JavaScript function.

Where you find

if(one == another) { return true; }

change it to

if(one != another) { return true; }

Changing "==" to "!=" causes the code to compare for inequality instead of comparing for equality.

Optionally, change the alert message and the JavaScript function name as appropriate for the changed code.

Will Bontrager