Verify / Notify for Duplicate Fields

When requesting an important bit of information, such as an email address or a password, you might want the user to enter the information twice so you can verify that a typing error did not occur.

Instead of waiting for the user to submit the form, why not notify the user when the passwords match (and more importantly, when they don't match)?

In the following form, make up a password and enter it in each field. When the passwords match, a "thank you" message should appear. Try modifying one of the passwords so they no longer match and see what happens.

Password:

Re-enter Password:

 

Download

• verifynotify.js
  JavaScript code
• example.html
  HTML example

If you find this script useful a small donation would be appreciated!

Tutorial

For best results, download the example HTML file and use it as a template.

1. In the HEAD section of your HTML file, load the javascript code:

   <SCRIPT TYPE="text/javascript" SRC="verifynotify.js"></SCRIPT> 

2. Create your form and the two fields that you want to verify:

   <FORM NAME="password_form" ACTION="" METHOD="POST">
   
   Password:<BR>
   <INPUT TYPE=password NAME=password1 onKeyUp="verify.check()">
   
   <P>
   Re-enter Password:<BR>
   <INPUT TYPE=password NAME=password2 onKeyUp="verify.check()">
   
   </FORM>

   Notes:
   • You must give your FORM element a unique NAME attribute.
   • You must give the INPUT elements different NAME attributes.
   • Notice the ONKEYUP attribute for each INPUT element. The verify object will be created later.
3. Create an HTML element to hold the notification message. You must give it a unique ID attribute.

   <DIV ID="password_result">&nbsp;</DIV>

   Notes:
   • I put   as a default value, because some browsers do not format the page correctly if the default value is empty.
4. Finally, create the verify object, and initialize all the values.

   <SCRIPT TYPE="text/javascript">
   <!--
   
   verify = new verifynotify();
   verify.field1 = document.password_form.password1;
   verify.field2 = document.password_form.password2;
   verify.result_id = "password_result";
   verify.match_html = "<SPAN STYLE=\"color:blue\">Thank you, your passwords match!<\/SPAN>";
   verify.nomatch_html = "<SPAN STYLE=\"color:red\">Please make sure your passwords match.<\/SPAN>";
   
   // Update the result message
   verify.check();
   
   // -->
   </SCRIPT>

   Notes:
   • Use the NAME attributes from your FORM and INPUT elements to set field1 and field2.
   • Use the ID attribute from your DIV element to set result_id
   • Set match_html and nomatch_html to whatever message you want to display. Any valid HTML is allowed, but since this is inside a JavaScript block, make sure you escape the string correctly: change " to \" and change </ to <\/

License

Article Copyright

© 2003 Patrick Fitzgerald, All Rights Reserved

Program License

© 2003 Patrick Fitzgerald

verifynotify.js is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA

Support

If you like this script donate a buck, make an Amazon.com purchase through my links, or buy me something from my wishlist.