Dreamweaver Adding a tickicon to a valid form when validated

Hi,
I hope you can help, asI am now going nuts!
I have a form with form validation in dreamweaver that works perfectly except I just cannot get the form to display a tick icon when the fied is entered correctly. I have looked at many examples and can only get the green tick tick to always be there.
Any help would be veryhelpful.

Thanks
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<form id="form1" name="form1" method="post" action="email.php">
  <table width="600" border="0" align="center" cellpadding="0" cellspacing="5">
    <tr>
      <td width="74">First name</td>
      <td colspan="2"><span id="firstname">
        <label>
          <input name="text1" type="text" id="text1" size="57" />
           <img src="images/ok.gif" width="15" height="15" />
          <span class="textfieldRequiredMsg"><img src="images/formerror.gif" alt="" width="15" height="15" /></span></label>
</span></td>
    </tr>
    <tr>
      <td>Surname</td>
      <td colspan="2"><span id="Surname">
        <label>
          <input name="surname" type="text" id="surname" size="57" />
           <img src="images/ok.gif" width="15" height="15" />
        <span class="textfieldRequiredMsg"><img src="images/formerror.gif" width="15" height="15" /></span></label>
</span></td>
    </tr>
    <tr>
      <td>Email</td>
      <td colspan="2"><span id="Email">
        <label>
          <input name="email" type="text" id="email" size="57" />
           <img src="images/ok.gif" width="15" height="15" />
        <span class="textfieldRequiredMsg"><img src="images/formerror.gif" width="15" height="15" /></span><span class="textfieldInvalidFormatMsg"><img src="images/formerror.gif" width="15" height="15" /></span></label>
</span></td>
    </tr>
    <tr>
      <td>Telephone</td>
      <td colspan="2"><span id="Telephone">
        <label>
          <input name="telephone" type="text" id="telephone" size="57" />
           <img src="images/ok.gif" width="15" height="15" />
        <span class="textfieldRequiredMsg"><img src="images/formerror.gif" width="15" height="15" /></span></label>
</span></td>
    </tr>
    <tr>
      <td>Company</td>
      <td colspan="2"><label>
        <input type="text" name="Company" id="Company" />
      </label></td>
    </tr>
    <tr>
      <td>Product</td>
      <td colspan="2"><label>
        <select name="Product" id="Product">
        </select>
      </label></td>
    </tr>
    <tr>
      <td>Enquiry</td>
      <td colspan="2"><span id="message">
        <label>
          <textarea name="message" id="message" cols="45" rows="5"></textarea>
          <img src="images/ok.gif" width="15" height="15" />
        <span class="textareaRequiredMsg"><img src="images/formerror.gif" width="15" height="15" /></span></label>
</span></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td width="302"><label>
        <input type="submit" name="button" id="button" value="  Send  " />
      </label></td>
      <td width="204" align="left"><label>
        <input type="reset" name="button2" id="button2" value="  Reset  " />
      </label></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
    </tr>
  </table>
</form>
<script type="text/javascript">
<!--
var sprytextfield2 = new Spry.Widget.ValidationTextField("Surname", "none", {validateOn:["change"]});
var sprytextfield3 = new Spry.Widget.ValidationTextField("Email", "email", {validateOn:["change"]});
var sprytextfield4 = new Spry.Widget.ValidationTextField("Telephone", "none", {validateOn:["change"]});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("message", {validateOn:["change"]});
var sprytextfield1 = new Spry.Widget.ValidationTextField("firstname", "none", {validateOn:["change"]});
//-->
</script>
</body>
</html>

Open in new window

LVL 1
flashjordanAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

yessirnosirCommented:
This appears to be a bug:  see the comment at the bottom of this page
http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WSFE3BE966-7A7C-411d-A941-8AFE1AA9ED35.html
It says that the "textfieldValidMsg" class does not work.  You should be able to put the "ok.gif" file in a span like this:
<span class="textfieldValidMsg"><img src="images/ok.gif" width="15" height="15" /></span>
and that should make the green check only appear when the input is in a valid state.
But I tried it and it doesn't work for me.
0
yessirnosirCommented:
just examined the spry code, and fixing this bug isn't so tough.  try adding this style to SpryValidationTextField.css (and use the span tags above to surround the ok.gif)

.textfieldValidState .textfieldValidMsg
{
      display: inline;
}
0
flashjordanAuthor Commented:
Hi,
Thanks for your reply... However still no luck. I have tried many avenues in this direction, but still no joy... It just doesn't work.
Have a look at this off the adobe site, because this works and makes me crazy
http://labs.adobe.com/technologies/spry/demos/formsvalidation/

the source doesn't help either
0
Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

yessirnosirCommented:
It looks like that example is using a newer version of Spry but the method is very similar.

They apply the class "validMsg" to the check image, like this

<img src="images/ok.gif" title="Valid" alt="Valid" class="validMsg" border="0"/>

That style is defined in stylesheet http://labs.adobe.com/technologies/spry/demos/formsvalidation/validation.css like this (note the display:none makes it invisible by default):
.validMsg{
      width:16px;
      height:16px;
      margin-left:6px;
      margin-top:-2px;
      display:none;
}
but if the js sets the overall class to .textfieldValidState, then this rule kicks in to make it visible:

.textfieldValidState .validMsg, .textareaValidState .validMsg, .selectValidState .validMsg, .checkboxValidState .validMsg, .radioValidState .validMsg{
      display:inline;
}

I don't know which version of spry you have, but the method is exactly the same, you just have to figure out whether you need to use the .textfieldValidMsg or the .validMsg class for your image.

If you still can't get it to work, post your versions of the two spry stylesheets you are using, and I'll show you exactly what you need to change.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
flashjordanAuthor Commented:
I was looking at the same thing... downloaded the validation css from the adobe example which overwrites the spry css and allows the tick link to work if set to required on: change. Some moderfication of the css is needed to retain user design layout. But all working now, thanks for your help... Your a Star!
0
yessirnosirCommented:
glad that worked out.
btw... if you are trying to figure out how a demo like that really works, an indispensable tool is the "web developer toolbar" http://chrispederick.com/work/web-developer/  which is an add-on for Firefox that lets you quickly see all sorts of details about the page, like what classes and styles are being applied.  See below a screenshot of what I used to track down how Adobe's example works....  You can see the toolbar itself at the top of the image... very powerful, highly recommended!
web-developer-show-classes.jpg
0
Jason C. LevineDon't talk to me.Commented:
Folks,

Spry v1.4 that shipped with CS3 is already two version old.  The newest version is 1.6.1 and everyone should grab the updater Extension and run it:

http://labs.adobe.com/technologies/spry/
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Dreamweaver

From novice to tech pro — start learning today.