Verify / Notify for Duplicate Fields

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 <\/