Spry Validation Text Box - Playing Nicely w/ Javascript

Greetings-
I'm using the Spry Validation Text Fields in a registration
form I'm designing. I really like the validation they provide.
However, I'm trying to get them to play nicely with a password
validation Javascript code that gets called when the form is
submitted:
Form Example
The password validation JS compares the two email fields to
make sure they are both the same. The JS is called when the form is
submitted.
<SCRIPT LANGUAGE="JavaScript">

</script>
However, this disables the Spry text field validations. I'm
most certain my "OnSubmit" code causes the Spry validation to not
execute.
Any gurus have some ideas around this?
Thank you.

Your are going to love this...
I confirmed I have the constructor same as yours. Only difference in your code and mine is I did not have the validateOn blur in the Javascript, but rather was using the default validation on submission. However, I dutifully added that, just to replicate your test exactly and to look at apples to apples. The code is still throwing up the validation messages.
Stumped, I took a break, played a video game, cleared the mind and started the process of carefully and logically working the code for about the umpteenth time in the last 24 hours.
Given this validation is working just fine on the page where new items are created, I laid out that pages code next to the edit page code and started going through line by line... and Eureka! No reference in my edit page head to the SpryValidationTestField.js... (**red faced, banging head on desk**)
That's 2 for 2 with you helping me realize its not the Spry code, so it must be something else and that something else, once again, was me. The human error element. If I hit strike three down the road I deserve a sound verbal thrashing...
Once again I am in your debt and you have my gratitude!
Thank you Gramps!

Similar Messages

Using JavaScript to set value of Spry validated text field

Why can't the value of a text field be set using JavaScript
when it's validated using the Spry validation widget.
Example (this works):
<select name="birthdate_month" id="birthdate_month"
onChange="document.getElementById('birthdate').value = 'test';">
<option>1</option>
<option>2</option>
</select>
<input type="text" name="birthdate" id="birthdate"
value="">
Example (this doesnt work):
<select name="birthdate_month" id="birthdate_month"
onChange="document.getElementById('birthdate').value = 'test';">
<option>1</option>
<option>2</option>
</select>
<span id="birthdate">
<input type="text" name="birthdate" id="birthdate"
value="">
<span class="textfieldRequiredMsg">please enter your
birthday</span>
</span>
<script type="text/javascript">

</script>
Is there a way to change the value of a Spry validated text
field using JavaScript?
Thanks.

Why can't the value of a text field be set using JavaScript
when it's validated using the Spry validation widget.
Example (this works):
<select name="birthdate_month" id="birthdate_month"
onChange="document.getElementById('birthdate').value = 'test';">
<option>1</option>
<option>2</option>
</select>
<input type="text" name="birthdate" id="birthdate"
value="">
Example (this doesnt work):
<select name="birthdate_month" id="birthdate_month"
onChange="document.getElementById('birthdate').value = 'test';">
<option>1</option>
<option>2</option>
</select>
<span id="birthdate">
<input type="text" name="birthdate" id="birthdate"
value="">
<span class="textfieldRequiredMsg">please enter your
birthday</span>
</span>
<script type="text/javascript">

</script>
Is there a way to change the value of a Spry validated text
field using JavaScript?
Thanks.

Spry validation text field across two columns in a table?

I have a table with two columns. I can easily insert a spry validated text field into the left cell but when I drag the box over so that box is in the right column and the label is still in the left column then that breaks the widget.
Is this even possible for me to do or do I have to put the widget in just one column?

Think I figured it out.
http://www.adobe.com/devnet/dreamweaver/articles/spry_form_validations.html

Spry validation text field issue

I've put several spry validation text fields on my site and
you can still click through to the next page without having to
enter any information. What am I missing?

Think I figured it out.
http://www.adobe.com/devnet/dreamweaver/articles/spry_form_validations.html

Spry Validation Text Field widget

I want to make sure users insert a properly formatted email
address, which I found out how to do here.
http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WSC7D22C22-1123-4e9b-8218-F317C DD39F2B.html
The problem is that when the user inserts an invalid email
address the text box stays red but no error message displays. How
do I go about having the error message show. Right now it only
shows if they leave the box blank.

I went to
http://labs.adobe.com/technologies/spry/demos/formsvalidation/
to try to get an idea how they did their form and they have check
marks and x to better define their section. It seems all the
customizing requires knowledge of Javascript which I am not too
strong in. I guess there is no menu driven method to duplicate that
form.
Looks like nobody else has played with form validation
either.

Spry Validation-text field shows the "required" text even in initial state

Hi,
I'm having trouble with spry validation.
I insert my spry textfied and go to the properties inspector where I choose validate on "Blur" and "submit" for the Required state. I check the required box for the "required state" but the initial state will also have the "a value is required" text. If I try to delete the "a value is required" text from the initial state, the required state won't show this error.
What should I do?
Any help is much appreciated.
Thank you.

Hi, thanks so much for the reply
Well the javascript came with the spry file that I downloaded from the adobe site.
Here is my statement:
<label for="name"><span class="style87">Name:</span></label>
                  <span id="sprytextfield1">
                  <input name="name" type="text" class="textInput" id="name" />
                  <span class="textfieldRequiredMsg">A value is required.</span>                  </span></p>
              <p> <span class="style87">
                  <label for="email">Email:</label>
                  </span><span id="sprytextfield2">
                  <input name="email" type="text" class="textInput" id="email" />
                  <span class="textfieldRequiredMsg">A value is required.</span></span></p>
This is the statement for the submit button:
<span class="clearIt">
                  <input name="send" type="submit" id="send" onclick="MM_validateForm('username','','R','password','','R','name','','R','email','','R' ,'comments','','R');return document.MM_returnValue" value="Send comments" />
                </span><span class="clearIt">
                <input type="hidden" name="MM_insert" value="form1" />
This is the javascript
<script type="text/javascript">

</script>
This is at the bottom of the page:
<script type="text/javascript">

</script>
Thank you for your help.

Validating text box characters

So far my validation of user input is checking for nulls, spaces within strings, max/min values or integers (where applicable). Now, I need to check for specific characters within the string on certain text boxes. For example, I don't want the user to input
special characters like !,@,#,$,%,^,& etc...
Would this have to be accomplished using regex utilizes like for validating email format? Or is there a built in function for checking for special characters?
James

For this project I really only have four format types of user input. Integers (with min/max values), IP address, Email Address and Strings that contain no special characters. It seems that I could tag my controls as either "IP Address",
"Text", "Email Address" or "Integer" and then loop through all the controls in the project and check for formatting using something similar to what was posted in another thread. Thoughts?
James
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
'Set combo boxes to index 0
For Each cmb As ComboBox In GetControlsOfType(Of ComboBox)(Me, True)
cmb.SelectedIndex = 0
Next
End Sub
Function GetControlsOfType(Of ctrlType As Control)(parent As Control, searchContainers As Boolean) As IEnumerable(Of ctrlType)
Dim ctrls As New List(Of ctrlType)
For Each ctrl As Control In parent.Controls
If TypeOf ctrl Is ctrlType Then ctrls.Add(DirectCast(ctrl, ctrlType))
If searchContainers AndAlso ctrl.Controls.Count > 0 Then ctrls.AddRange(GetControlsOfType(Of ctrlType)(ctrl, searchContainers))
Next
Return ctrls
End Function

Possible to change type of spry validation text field at run time?

I am trying to record a date of death on a form, which obviously for live people might not require a value. I have a radio group (Yes/No) that specifies whether the fields associated with the date of death are visible (select for month, day and year). For the year, I have it set to be an integer with a minimum and maximum value. The selects have an invalid value of -1 set, with one item labeled "Select month" and "Select day" given the -1 value.
When the "no" button is clicked, I want to make it so that submitting the form does not cause validation errors for the spry fields associated with the date of death. I have successfully added onChange events to the select objects that call javascript, along the lines of spryselect1.invalidValue = -2. I can also make it so that the text field representing the year of death is not forced to be required: sprytextfield1.isRequired = false.
However, I'm having a hard time getting the "invalid format" validation to be canceled. I have tried executing sprytextfield1.type = "none", since looking at the source code in SpryValidationTextField.js seems to indicate that the object's type property is important. However, this doesn't work; I think that's because the type property is used to look up a validation function in an array when the object is constructed, and may not be referenced again after that.
So, I'm looking for either:
a property/method to call to effectively change the type OR
information on whether reconstructing the variable with new options will work. I am not sure if any event handlers registered during the object's original construction will still be fired even if I make the variable point to a new object. I see a destroy function in the source code that might do what I want, but my Javascript knowledge isn't too great, so I don't know if that method needs to be called explicity or whether it happens implicitly when an object is garbage collected.
Thanks in advance for any help you might be able to give.
Ryan

This may help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Deleting and rebuilding validations</title>
<link href="http://config.spry-it.com/css?f=ValidationTextField" rel="stylesheet" type="text/css" />
<script src="http://config.spry-it.com/js?f=ValidationTextField" type="text/javascript"></script>
<script type="text/javascript">
// build validations and delete / destroy them
function val(e){
     // get the value
     value = e.value;
     // see what radion button we have
     if(value == "Married"){
          // if there inst a validaton build one
          if(!sprytextfield1){
               sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
          // if there is a validaiton in sprytextfield destory it, and clear the variable
          if(sprytextfield2 && sprytextfield2.destroy){
               sprytextfield2.resetClasses();
               sprytextfield2.destroy();
               sprytextfield2 = null;
          // same as the rest
          if(sprytextfield3 && sprytextfield3.destroy){
               sprytextfield3.resetClasses();
               sprytextfield3.destroy();
               sprytextfield3 = null;
     } else if(value == 'Defacto'){
          if(!sprytextfield2){
               sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2");
          if(sprytextfield1 && sprytextfield1.destroy){
               sprytextfield1.resetClasses();
               sprytextfield1.destroy();
               sprytextfield1 = null;
          if(sprytextfield3 && sprytextfield3.destroy){
               sprytextfield3.resetClasses();
               sprytextfield3.destroy();
               sprytextfield3 = null;
     } else if(value == 'Single'){
          if(!sprytextfield3){
               sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3");
          if(sprytextfield1 && sprytextfield1.destroy){
               sprytextfield1.resetClasses();
               sprytextfield1.destroy();
               sprytextfield1 = null;
          if(sprytextfield2 && sprytextfield2.destroy){
               sprytextfield2.resetClasses();
               sprytextfield2.destroy();
               sprytextfield2 = null;
     // proceed with the rest as normal
     return true;
</script>
</head>
<body>
<form id="form1" method="post" action="#">
     <p>
          <input type="radio" name="radio" id="Married" value="Married" onclick="val(this);" />
          <label for="Married">Married</label>
     </p>
     <p>
          <input type="radio" name="radio" id="Defacto" value="Defacto" onclick="val(this);" />
          <label for="Defacto">Defacto</label>
     </p>
     <p>
          <input type="radio" name="radio" id="Single" value="Single" onclick="val(this);" />
          <label for="radio">Single</label>
     </p>
     <hr />
     <span id="sprytextfield1">
     <input name="married" id="f_married" type="text" value="forMariedOnly" />
     <span class="textfieldRequiredMsg">A value is required.</span></span><span id="sprytextfield2">
     <input name="defacto" id="f_defacto" type="text" value="forDefactoOnly" />
     <span class="textfieldRequiredMsg">A value is required.</span></span><span id="sprytextfield3">
     <input name="single" id="f_single" type="text" value="forSingleOnly" />
     <span class="textfieldRequiredMsg">A value is required.</span></span>
     <hr />
     <input type="submit" value="Submit" />
</form>
<script type="text/javascript">

</script>
</body>
</html>
Gramps

Having Problems with "pattern" in Spry Validation Text Field

Hi, thanks for reading. I have read the primers and docs on
using the "custom" pattern ability of the spry textfield validion.
However, I am unable to fully understand how to implement the
conditions I desire. I have read that you use:
"B"; "b" for Case-insensitive alphabetic characters.
I suppose my first question is, does that mean either B or b
will work?
What I am trying to accomplish for my first validation is:
1- to allow between 1 and 15 characters to be entered. They
should be only a) alphanumeric (number or letter) b) they MAY
contain a space in there and c) the first character needs to be a
letter. So, what I want it to scrub for is a char string no longer
than 15 chars, number or letter (may contain a space, but that
counts towards the 15) and the first char must be a letter.
I have been playing around with the attributes:
("spryCustomtest", "custom", {validateOn:["blur"],
minChars:1, maxChars:15, pattern:"a"});
however, i am unable to see how to specify the pattern so
that it allows for 1-15 chars and insists that only the first char
is a letter......
My second question is, how could I implement a field for
heightened password-choosing rules....
perhaps tell it to allow for:
a) minimum of 8 characters
b) at least one capital letter
c) at least one special character or number
d) maximum of 30 characters
thanks for any help, Tex

Did you ever find a solution for this?

Spry accordion widget not playing nicely with IE7

Good day.
The answer to this issue may be on this forum somewhere already, but I cannot take the time to scour the several hundreds of posts.
I've build and customized my first spry accordion, which can be viewed at http://www.brianfisherart.com/Bio/Contact/
In Firefox and Safari, it works perfectly! IE7 however has some issues. the panels get too large on mouseovers, and jumpy and even larger when opening lower level panels.
Just hoping to find a quick fix.
Thanx in advance.

I'm certainly not going to do your search for you, but you might want to see if using the current version 1.6.1 works better.
http://labs.adobe.com/technologies/spry/
If that doesn't work, you might want to go to the Spry forum.
Of course, now that you've posted, I wonder if any of the links in that "More Like This" box apply?
Mark A. Boyd
Keep-On-Learnin' :-)
If you are reading this via email, be aware that it may not be an accurate representation of my message. Login to read the actual message and/or to reply.

Spry validation textfield errors are appearing as regular text

I am trying to create a simple email contact form using two spry validation text fields and one spry validation textarea. I inserted a spry validation text field called "Name", and then a second below it called "email" and then a spry validation textarea called "message" I gave the email field an email validation to come on at Blur, and a textarea character count validation of no more than 400 characters. The problem is that the error messages are appearing as soon as the page is loaded, they are bypassing their initial states. They say: "A value is required.Invalid format." and "A value is required.Exceeded maximum number of characters."

I build a sample a while ago that shows you how to generate and destroy validations on the fly.
http://www.spry-it.com/examples/spry-widget-validation-generation-and-destroy/
Check out the source for how its done.

Spry validation onblur

Hello, is it possible to use onblur in a spry validation text field? I want to use spry to validate text field input to be required and 4 to 32 chars long but i want on blur to make ajax request to check if the username is available (this is for registration form). However if i use onblur="check_username(this.value)" it does not trigger the onblur event at all.

Strange this does not work correct. I even tried with the click event to be sure. Below is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head><script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
<body>
<form method="post">
     <table border="0" cellpadding="0" cellspacing="0" width="100%" class="cool-table">
          <tr>
               <td>Username:</td>
               <td><span id="sprytextfield1">
               <input type="text" name="username" id="username" />
               <br><span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">4 characters minimum.</span><span class="textfieldMaxCharsMsg">32 characters maximum.</span></span></td>
          </tr>
          <tr>
               <td colspan="2" align="center"><input type="submit" value="Login" /></td>
          </tr>
     </table>
</form>
<script type="text/javascript">

</script>
</body>
</html>
When i load the page in browser with this code it displays alert box with empty message (because username value is empty) immediately after page load, and never displays a thing when i click the text field.
If i use
Spry.Widget.Utils.addEventListener("username", "click", check_username, false);
without parentheses after the handler function name it does absolutely nothing on click too. Any idea?
I even noticed error in Adobe documnet located at http://labs.adobe.com/technologies/spry/articles/data_api/apis/utils.html#addeventlistener
In the example it says
<script type="text/javascript>
But must be
<script type="text/javascript">

Spry Validation Checkbox with an ASP button

Is there any way to get the Spry Validation Check box
JavaScript to fire when a asp button is clicked. I noticed that is
was originally written for an HTML submit type. If my question
seems juvenile I apologize but my brain is racked with other issues
concerning the web page I am developing. Thanks in advance

Do yourself a big favor and don't waste time with Spry Validation. Most modern browsers support HTML5 forms with the required attribute.
If you must placate older browsers, use jQuery validate script. It's lightweight and works when HTML5 support is missing. You can see an example below. If you hit submit with empty form fields, the required fields pop-up with messages. View source in browser to see the code.
HTML5 Form with jQuery Validation
Nancy O.

Spry Validation in Dreamweaver CC

Hello,
I'm trying to find the spry validation in the CC version. It used to be under insert - form - spry validation text field, etc in CS6. Some places online said it's under the spry menu, but I can't find a spry menu. Where would I find it?
Thanks!

You're not missing anything, Adobe abandoned the Spry framework in 2012 and removed all Spry items from the newer versions of program.
You need to make sure you are using resources that match your actual program, older tutorials won't help in the newer, constantly changing, product.
As far as form validation goes, you'd probably want to look into jQuery alternatives like: http://jqueryvalidation.org/documentation/

Spry validation textfield - required condition

Can anyone help me with the Spry validation text field...
I have a form for which I wish to be able to use for 1 to 4
users to fill in, if at the beginning of the form they select 2
users then I wish to then change the 'isRequired:false' to
'isRequired:true' so that the details for user 2 then become
required before the form submits... Is there a way I can do this?
Thanks

...plz help me..

Spry Validation Text Box - Playing Nicely w/ Javascript

Similar Messages

Maybe you are looking for