We help IT Professionals succeed at work.

Spry Validation Text Feild

1,087 Views
Last Modified: 2013-11-19
How do you validate a web text form using spry validation and have an image pop up (if the text in the field is valid). Similar to what is on experts exchange website. I'm currently using Dreamweaver CS3

I can get an image to load no problem if the text is not valid, but can't figure out how to show an image(check mark) out side of the text feild if the text is valid. I hope this makes sense. My code in the SpryValidationTextField.css is as follows:
/* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
      display: inline;
      background-image: url(../images/check.gif);
      background-repeat: no-repeat;
      background-position: right center;
      margin: 0px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
}

This populates the image inside of the text feild not outside like in the required message.

My HTML code is as follows for the text feild:
<td height="30" colspan="2"><span id="sprytextfield1">
          <input name="StreetAddress" type="text" id="StreetAddress" size="40" />
          <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
Comment
Watch Question

Commented:
You want a pop-up, or just a text message to be displayed?

You do need to add the widget to your code after the fields.

Author

Commented:
Text message to be displayed  with an image. To be outside of the text feild, in other word sitting directly to the right of the text feild. When the answer is correct an image of a check mark will show up and the text fields background would turn green

Commented:
You're using the wrong property.  The css stuff above has to do with the INPUT field.  What you want is to modify the message it gives outside of the input field.

See: http://labs.adobe.com/technologies/spry/articles/textfield_overview/

You need to modify the:

.textfieldValidMsg

Class with your image.  Do something like this:


         
          <input name="StreetAddress" type="text" id="StreetAddress" size="40" />
          A value is required.
          Invalid format.
          PLACE YOUR VALID TEXT HERE
           


Then modify the CSS for .textfieldValidMsg as you wish.

Commented:
Oops, the text field took out my span tags...I'll place the example code in the code snippet to avoid that:
<td height="30" colspan="2">
  <span id="sprytextfield1">
    <input name="StreetAddress" type="text" id="StreetAddress" size="40" />
    <span class="textfieldRequiredMsg">A value is required.</span>
    <span class="textfieldInvalidFormatMsg">Invalid format.</span>
    <span class="textfieldInvalidFormatMsg">PLACE YOUR VALID TEXT / IMG HERE</span>
  </span>
</td>

Open in new window

Commented:
Shoot, I forgot to change the last span class, forgot to change the class.  Correction:
<td height="30" colspan="2">
  <span id="sprytextfield1">
    <input name="StreetAddress" type="text" id="StreetAddress" size="40" />
    <span class="textfieldRequiredMsg">A value is required.</span>
    <span class="textfieldInvalidFormatMsg">Invalid format.</span>
    <span class="textfieldValidMsg">PLACE YOUR VALID TEXT / IMG HERE</span>
  </span>
</td>

Open in new window

Author

Commented:
Did you mean for the last span tag to read:
PLACE YOUR VALID TEXT / IMG HERE

Commented:
Yes -- I corrected the post.  Sorry for the error.

Author

Commented:
I understand why you did the mark up in the html version of the code but I can't figure out where to add the css code in the css file

Commented:
The class

.textfieldValidMsg

Should already exist in the CSS file pre-created by the Spry framework.  You'd just need to locate it and modify as you desire.  See the example site:

http://labs.adobe.com/technologies/spry/articles/textfield_overview/

It shows you the classes that should exist in that file.

Author

Commented:
It's diffent when I look at the css file the required message (in the css class) is populated by the .textfieldMaxCharsState . textfieldMaxCharsMsg where the .textfieldValidMsg is set to display:none; by default. See snippet. Just does not make sense to me why this is.
@charset "UTF-8";
 
/* SpryValidationTextField.css - version 0.4 - Spry Pre-Release 1.6.1 */
 
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 
 
/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {/*INSERT HERE??????????*/
	display: none;
}
 
/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #660000;
	background-image: url(../images/wrong.gif);
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 18px;
}
 
 
 
/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	display: inline;
	background-image: url(../images/check.gif);
	background-repeat: no-repeat;
	background-position: right center;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

Open in new window

Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
jasch2244,

The CSS file controls the formatting of the text in the spans only.  If you want the span to have a background image, then you modify the CSS.  Otherwise, just add the img tag in the HTML in the span of your choice.

Author

Commented:
If you look at the code (in the css file) under the textfieldValidMsg the default is for the display:none if the value is "suitable" then it should somehow show what is in the span tag. The required message  spans out no problem, but if the tiext field is valid it does not show the span for validmsg. I'm thinking it has something to do with the javascript file.

Again, if I mess with the textfieldValidMsg it will always show what the valid message should be whether it is valid or not.

Not sure where to go from here, I have included a snippet of the css so you can see what is going on.

Thanks again for your patience
/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}
 
/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #660000;
	background-image: url(../images/wrong.gif);
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 18px;
}
 
/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	background-color:#B5EEB8
}
 
/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input {
	background-color: #FFF0F0;
}
 
AND SO ON

Open in new window

Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
>> but if the text field is valid it does not show the span for validmsg

Yeah, I just noticed that on testing.  It may be a planned Spry feature that isn't active as of 1.6.1 yet

Commented:
I'm with Jason -- I tested it as well with the same results.  Seems pretty lame that they have that even in their documentation and it's not active yet?  Either that or there's some error in their js file.
Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
The js file looks...odd...to me.  I think there may be some miscoding and rogue comment blocks, but I'm hesitant to f**k with it as it appears to otherwise be working.

I'll set up a test server when I have a chance and play with it.

Author

Commented:
Ok I was really spinning my brain on this one.... I'm just glad to see others having the same problem. Been all over the net looking for the answer. The folks at experts-exchange have the answer though because they have the same feature I'm looking for on the registration page of the site. It would be nice if they would enlighten us.
Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
Use a different AJAX library.  MooTools has what you are looking for.

Author

Commented:
I couldn't find what it was specifically you are referring to can you point me in the right direction? Link possibly. Thank you
Don't talk to me.
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.