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.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2005 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
