Web-standard solutions for a non-standard world

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 &nbsp; 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 <\/

Page: all 1 2 3 4 next»
The next page is License



Download

Rate This Script


Projects

Home : Contact Us : ©2006 BarelyFitz Designs, All Rights Reserved