Spry Validation and OK

Question

I am using the source code form text validation demo as a
model
</tr>
<th scope="row">Zip</th>
<td><span id="Recipient_Zip">
<input type="text" name="Recipient_Zip" />
<img src="images/ok.gif" title="Valid" alt="Valid"
class="validMsg" border="0"/>
<span class="textfieldRequiredMsg">A value is
required.</span><span
class="textfieldInvalidFormatMsg">Invalid
format.</span></span></td>
</tr>
The OK image shows up all the time right when I load the form
rather then when I enter text.
You can see the whole form at
http://ufsflowers.pointinspace.com/aafes_order_b.php
I assume it is jsut something I am not seeing in the demo
source code but can someone point me in the right direction

Answer 1

Hi fmpdan,
In a nut shell, any time the widget performs a validation, it
will place a specific CSS class name on the top-level element of
the widget which indicates the name of the state. Designers are
supposed to use these states to define CSS contextual selectors to
show/hide messages and images of their choice. If you are using
code from the demos, then you need these CSS rules:
.validMsg{
display:none;
.textfieldValidState .validMsg, .textareaValidState
.validMsg, .selectValidState .validMsg, .checkboxValidState
.validMsg, .radioValidState .validMsg{
display:inline;
The rules above hide any elements with the class "validMsg"
on them. They become visible automatically when the element has a
parent with one of the valid state classes on them.
Be sure to checkout the documentation here:
http://labs.adobe.com/technologies/spry/Docs.html
Which will tell you what the validation state CSS class names
are for each widget, so you can define your own CSS contextual
selectors.
--== Kin ==--