FP: Sample DHTML to Compare Two Passwords (277477)

SUMMARY

In Microsoft FrontPage, when you use the HTML password text box to input data on a form, the text is not displayed to the browser. For example, in Microsoft Internet Explorer, asterisks appear in place of each character that you type. This can make it impossible to verify if the information entered is correct.

In addition, in FrontPage, the built-in form validation does not allow you to compare two text boxes to allow you to enter the same password twice to confirm a match.

You can use Dynamic HTML (DHTML) to compare the information typed in two password text boxes before you submit a form. This article provides sample DHTML code that checks the values in two password fields, displays a message box if the fields do not match, and prevents you from submitting the form results if they don't match.

NOTE: This article includes custom DHTML that may not be available in all browsers. For more information about compatibility with other browsers, click Microsoft FrontPage Help on the Help menu, type compatibility in the Office Assistant or the Answer Wizard, and then click Search to view the topic.

MORE INFORMATION

Microsoft provides programming examples for illustration only, without warranty either expressed or implied. This includes, but is not limited to, the implied warranties of merchantability or fitness for a particular purpose. This article assumes that you are familiar with the programming language that is being demonstrated and with the tools that are used to create and to debug procedures. Microsoft support engineers can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific requirements. NOTE: You may receive an error message if you copy the examples directly from this article and paste them into FrontPage. The angle brackets (< and >) may appear as escaped HTML code (< and >). To work around this behavior, paste the script into a blank Notepad document, and then copy it from Notepad before you paste it into FrontPage.

In FrontPage, open a Web on a Web server.
Open a new page.
Switch to HTML view and remove all the existing HTML.

Type the following HTML code:

<html>
<head>
<title>Password Test</title>
<script language="javascript">
<!--
function checkMe()
{
  if (document.myForm.PWD1.value == document.myForm.PWD2.value)
  {
    document.myForm.PWD.value=document.myForm.PWD1.value;
    document.myForm.submit();
  }
  else
    alert("Passwords do not match!");
}
//-->
</script>
</head>

<body>

<p>Please enter your user name and password.</p>

<form method="POST" name="myForm">
  <input type="hidden" name="PWD">
  <table border="1">
    <tr>
      <td>Name</td>
      <td><input type="text" name="UID" size="20"></td>
    </tr>
    <tr>
      <td>Password</td>
      <td><input type="password" name="PWD1" size="20"></td>
    </tr>
    <tr>
      <td>Repeat Password</td>
      <td><input type="password" name="PWD2" size="20"></td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <input type="button" onClick="checkMe()" value="Submit">
        <input type="reset" value="Reset">
      </td>
    </tr>
  </table>
</form>
</body>
</html>

Switch back to Normal View.

You should see a form with three text boxes.
Right-click the form and then click Form Properties on the menu that appears.
In the Form Properties dialog box, click Send to, and then click Options.
Click the File Results tab. In the File Name box, type _private/results.htm.
Click the Saved Fields tab. In the Form fields to save box, type UID and PWD. Click OK.
Click OK again to quit the Form Properties dialog box.
Save the page to your Web and preview it in your Web browser.