Verify/Notify for Duplicate Fields

Patrick Fitzgerald Nov 14, 2007

General

When requesting certain information, such as an e-mail address or a password, it's usually best to have the user enter the information twice in order to verify that a typing error did not occur. This script will do just that, and will provide a message for your user that it has been done.

Notes

Created by: Patrick Fitzgerald
Web Site: http://www.barelyfitz.com/
Posted: November 14, 2007

For further information, visit the author's Web site.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: verifynotify.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Patrick Fitzgerald | http://www.barelyfitz.com/ */
/*==================================================*
 $Id: verifynotify.js,v 1.1 2003/09/18 02:48:36 pat Exp $
 Copyright 2003 Patrick Fitzgerald
 http://www.barelyfitz.com/webdesign/articles/verify-notify/

 This program 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
 *==================================================*/

function verifynotify(field1, field2, result_id, match_html, nomatch_html) {
  this.field1 = field1;
  this.field2 = field2;
  this.result_id = result_id;
  this.match_html = match_html;
  this.nomatch_html = nomatch_html;

  this.check = function() {
    // Make sure we don't cause an error
    // for browsers that do not support getElementById
    if (!this.result_id) { return false; }
    if (!document.getElementById){ return false; }
    r = document.getElementById(this.result_id);
    if (!r){ return false; }

    if (this.field1.value != "" && this.field1.value == this.field2.value) {
      r.innerHTML = this.match_html;
    } else {
      r.innerHTML = this.nomatch_html;
    }
  }
}

function verifyInput() {
  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();
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  verifyInput();
});

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="verifynotify.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form name="password_form">
Password:<br>
<input type="password" name="password1" onkeyup="verify.check()">
<p>
Re-enter Password:<br>
<input type="password" name="password2" onkeyup="verify.check()">
<p>
<!-- Display a message if the passwords match or don't match -->
<div id="password_result"> </div>
</form>

Leave a Response

(6 comments)

Not sure what you're talking about. There is no CAPTCHA verification image, nor is there any "Hear it!" msg.

Lee Dec 4, 2007

BTW: Using Firefox 2.0+ the CAPTCHA verification image does NOT display when the page first loaded and the "Hear it!" msg is barely understandable.

D Keane Nov 27, 2007

I do know it works because I just sent it to myself. You might check how your system filters the e-mail from internet.com. Mine is set to filter it to a separate directory and so the e-mail from this site (including code) also gets filtered there.

Lee Nov 21, 2007

I'm having the same problem as chris. I can copy/paste the scripts, but when I email the script to myself it never gets to my inbox. It is not being filtered by my mail program. I get other email from @internet.com.

Al Nov 20, 2007

why can I not download anything from this website.

chris Nov 15, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details