Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 310
  • Last Modified:

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

0
flashjordan
Asked:
flashjordan
  • 4
  • 2
1 Solution
 
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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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
 
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. LevineNo oneCommented:
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

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now