Hi good day.

I am currently using Spry Textfield Validation on my forms. Whenever there is an error, the error message does appear and the field goes red. However, the entire form is shifted to the left a couple of pixels. If the user corrects the value in the field, the form goes back to the right. What is wrong with this? I am using the default code on DreamWeaver. Here are the concerned parts of the code:

<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
...
<tr><td>Password:</td>
      <td><span id="sprytextfield1">
      <input type="text" name="password" value=""/>
      <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></td>
  </tr>
...
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {minChars:8, maxChars:20, validateOn:["blur"]});

Nothing was changed save for adding the min and max chars plus the validate on blur. Hope someone can help.

Its probably something in the CSS code - maybe there's a margin or padding being added in the textfieldRequiredMsg class.

Take a look in this file: SpryAssets/SpryValidationTextField.css

Its probably something in the CSS code - maybe there's a margin or padding being added in the textfieldRequiredMsg class.

Take a look in this file: SpryAssets/SpryValidationTextField.css

Hi, thank you for taking a look at my problem. I checked the CSS and there is no margin or padding being added. I also checked the .js just to be sure.

I just discovered that when table align="center", this problem occurs. If align is not set and the table is on the left, there is no problem. I have no problem reverting to a form that is aligned left. However, it would be good to know what is causing this. :)

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.