AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of jasch2244
jasch2244
 asked on

Spry Validation Text Feild

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>
Web DevelopmentScripting LanguagesAJAX
Avatar of undefined
Last Comment
Jason C. Levine
8/22/2022 - Mon
rowejd
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.
jasch2244
ASKER
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
rowejd
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.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
rowejd
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

rowejd
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

jasch2244
ASKER
Did you mean for the last span tag to read:
PLACE YOUR VALID TEXT / IMG HERE
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
rowejd
Yes -- I corrected the post.  Sorry for the error.
jasch2244
ASKER
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
rowejd
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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
jasch2244
ASKER
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. Levine
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.
jasch2244
ASKER
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

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Jason C. Levine
>> 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
rowejd
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. Levine
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.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
jasch2244
ASKER
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. Levine
Use a different AJAX library.  MooTools has what you are looking for.
jasch2244
ASKER
I couldn't find what it was specifically you are referring to can you point me in the right direction? Link possibly. Thank you
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
ASKER CERTIFIED SOLUTION
Jason C. Levine
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Jason C. Levine
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent