Modify code created with Dreamweaver CS3, to compare two text feilds.

Question

cj1 0 Newbie Poster

15 Years Ago

Hello all.

I am unable to solve two problems when creating a contacts form using dreamweaver CS3. My other problem is posted under the heading, "Setting text field to accept only alphabetical characters".

For this posting, can someone please tell me how to modify my code, pasted below, so that the "Contact Tel" and "Confirm Contact Tel" text fields are compared and must be identical before the user can successfully submit the form.

Thank you

Here's my current code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form id="form1" method="post" action="">
  <p>First Name
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="sprytextfield1">
      <input type="text" name="First_Name" id="First_Name" />
      <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span></p>
  <p>Last Name
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="sprytextfield2">
    <input type="text" name="First_Name2" id="First_Name2" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span></p>
  <p>&nbsp;</p>
  <p>Contact Tel
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="sprytextfield3">
    <input type="text" name="Contact_Tel" id="Contact_Tel" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Please enter numerical characters only.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span></p>
  <p>Confirm Contact Tel<span id="sprytextfield4">
  <input type="text" name="Confirm_Contact_Tel" id="Confirm_Contact_Tel" />
  <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Please enter numerical characters only.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span></p>
  <p>&nbsp;</p>
  <p>
    <input type="submit" name="Submit_button" id="Submit_button" value="Submit" />
  </p>
</form>
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {minChars:2, maxChars:15});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none", {minChars:2, maxChars:15});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "integer", {minChars:5, maxChars:15});
var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "integer", {minChars:5, maxChars:15});
//-->
</script>
</body>
</html>

javascript

Edited 14 Years Ago by peter_budo because: Keep It organized - For easy readability, always wrap programming code within posts in [code] (code blocks).

2 Contributors
1 Reply
149 Views
11 Months Discussion Span
Latest Post 14 Years Ago Latest Post by drkenrich

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

drkenrich 0 Newbie Poster · Answer 1 · 2009-10-13T14:22:05+00:00

I'm not a programmer. I'm a hack. I don't really know what I'm doing, but I can copy, paste, edit, and experiment pretty well. I had the same problem that cost me a couple of days to find what no one else seemed to explain in simple words.

At the beginning of the file you need to name and locate the spry .css and .js files as in:

<link href="../SpryAssets/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryValidationPassword.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryValidationConfirm.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryValidationConfirm.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>

Next, I created a two column table form and ended up with this code that worked. Here I have empty rows before and after the code so you can see what it is.

<td><span class="style5"></span></td>
      <td><span class="style5"></span></td>
    </tr>
      <tr>
        <td><span class="style5">
          <label for="text1">Email:</label>
          </span></td>
        <td>
          <span class="style5" id="sprytextfield1">
            <input type="text" name="text1" id="text1" />
            A value is required. 
          Invalid format.     </span> </td>
      </tr><tr>
        <td><span class="style5">
          <label for="confirm1">Confirm Email: </label>
          </span></td>
        <td><span class="style5" id="spryconfirm1">
          <input type="text" name="confirm1" id="confirm1" />
          A value is required. 
          The values don't match 
          </span> </td>
      </tr><tr>
        <td><span class="style5"></span></td>
      <td><span class="style5"></span></td>

Finally you need to have variables (var) at the end of the file to make the things work.

<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "email", {validateOn:["blur"]});
var spryconf2 = new Spry.Widget.ValidationConfirm("spryconfirm1", "sprytextfield1", {validateOn: ['blur']});
//-->
        </script>

If you create your page, create a 2 column table form, copy and paste the code pieces into the right places, it should work for you. It does for me, just don't ask me why. :confused:

Good luck,
Dr. Ken Rich