12 Replies Latest reply: Aug 6, 2007 11:01 PM by jlig RSS

    Spry textarea makes form validation fail

    Nickels55 Community Member
      I am a bit confused. I created a test form on my server with just a spry textarea on it and it works great:
      http://www.stephaniesrl.com/test-spry.html

      Then I created this form which also works:
      http://www.stephaniesrl.com/employment.html

      But, once I add in a spry textarea on the above form it will submit without validating that the info is correct:
      http://www.stephaniesrl.com/employment-spryprob.html

      I am so confused to why I can't get a spry textarea widget on this form without blowing it up?
      Please help!
        • 1. Re: Spry textarea makes form validation fail
          Donald Booth Community Member
          Hmm....wondering if your prototype.js and lightbox.js are conflicting with Spry.
          Can you try it without those files?
          We shouldn't conflict with them but something might be amiss.
          Let us know.
          Don
          • 2. Spry textarea makes form validation fail
            Nickels55 Community Member
            Removing those files fixed the issue. Further testing narrowed it down to this one:
            <script type="text/javascript" src="scripts/prototype.js"></script>

            Any clue what I can adjust in that file to remove the conflict? Should I look for overlapping variable names?

            And thanks for helping me narrow it down!

            Here is the source of the conflicting JS file:
            http://www.stephaniesrl.com/scripts/prototype.js
            • 3. Re: Spry textarea makes form validation fail
              Donald Booth Community Member
              A couple things to try.
              You can first try putting the prototype script tag above the Spry script tags.
              Also, updating to prototype 1.5 might help. We have been testing against that version. You are on version 1.4.
              It is generally a class with the $ function that causes conflicts. We have taken steps to work around these conflicts.
              Let us know if this helps.
              Don
              • 4. Re: Spry textarea makes form validation fail
                Nickels55 Community Member
                I updated the prototype file to 1.5.1.1 and it still acts the same way, the validation fails yet the form still submits.
                • 5. Re: Spry textarea makes form validation fail
                  Nickels55 Community Member
                  Bump - this seems to be a big bug with prototype.js 1.5.1.1 conflicting with the sprytextarea validation.

                  Can any experts help me fix this issue?
                  • 6. Re: Spry textarea makes form validation fail
                    Donald Booth Community Member
                    Yes, it appears to be.
                    We will check it out and reply with a solution as soon as we can.
                    Sorry for the trouble.
                    Don
                    • 7. Re: Spry textarea makes form validation fail
                      Nickels55 Community Member
                      Don, I found this and will mark it as the answer:

                      Hi,

                      Based on a previous report we fixed this bug in the Spry 1.5 preview release. To fix this bug you should edit the SpryValidationTextarea.js. Search for the:

                      Spry.Widget.ValidationTextarea.prototype.switchClassName = function (className){

                      and inside you should see around line 763 the following code:

                      for (var k in classes){
                      if (classes[k] != className){
                      this.removeClassName(classes[k]);
                      }
                      }

                      This code should change to the following:

                      for (var k = 0; k < classes.length; k++){
                      if (classes[k] != className){
                      this.removeClassName(classes[k]);
                      }
                      }

                      Please let me know about your results.

                      Regards,
                      Cristian MARIN
                      • 8. Re: Spry textarea makes form validation fail
                        jlig Community Member
                        Is there a downloadable CSS that will add those Green checks to my Spry form Validation? I have looked over your example : http://www.stephaniesrl.com/employment.html and the Spry Demo: http://labs.adobe.com/technologies/spry/demos/formsvalidation/ but do not know how to implement the images?
                        Thanks,
                        jlig
                        • 9. Re: Spry textarea makes form validation fail
                          Nickels55 Community Member
                          Ya know why, because I had to look over the spry samples on Adobe's page and figure out how to make it work on my page. Here is the secret that they forgot to tell you....

                          Add this on the html page on your spry widget right after the "end label" tag:
                          <img src="images/ok.gif" title="Valid" alt="Valid" class="validMsg" border="0">

                          Then open up the spry's .css document, and add these lines of code to the top of the document. They enable and disable the OK image:

                          .validMsg{
                          width:16px;
                          height:16px;
                          margin-left:6px;
                          margin-top:-2px;
                          display:none;
                          }

                          .textfieldValidState .validMsg, .textareaValidState .validMsg, .selectValidState .validMsg, .checkboxValidState .validMsg, .radioValidState .validMsg{
                          display:inline;
                          }


                          Ta-daaaah!
                          • 10. Re: Spry textarea makes form validation fail
                            jlig Community Member
                            Thanks Nickels55,
                            I will give this a try.

                            jlig
                            • 11. Re: Spry textarea makes form validation fail
                              Community Member
                              Hi,

                              We used the exact same mechanism that the Validation Widget uses but instead of span's tags we replaced with the img tags.

                              We could easily use the same class as in they are defined in the default CSS that came with every validation widget. We actually chose to use a different class name validMsg to better exemplify that you can create your own class names and define the elements behavior in a different way than we do by default.

                              Cristian
                              • 12. Re: Spry textarea makes form validation fail
                                jlig Community Member

                                Nickels55, You are the Forum Answer Man/Woman!

                                I added the code lines to the Spry CSS file, then uploaded the green Check image and finally added the code to my Spry Widget field. (It took a few tries to figure out just where to place that "<img source" line but I finally figured out that it workes everytime if I place it between the </span> X </span> tags.)

                                Here is a link to a copy of the page: http://www.clearwave.biz/addt/zT1COEd1i.cfm (I removed the Restrict to Page)

                                Some of my outstanding issues/concerns are:
                                1) Spry seems to "gray-out" my Save/Insert button sometimes & I have no way to get it back except to refresh the whole form and loose any data that I may have typed already? This is annoying.. Any Ideas?

                                2) Spry Validation for phone numbers gives me constant trouble with the Masks? It puts a ( at the end of my typed in phone# and says it's invalid?) I give up on Spry's Validation types..

                                3) I have ended up using a mix between ADDT & Spry to get phone numbers to act properly with my mask. ( Marin, ADDT is definitely a winner & it's validation always works for me! I like the extra features of Spry so I plan to combine the two if possible.

                                4) Spry Text validation also gives me the OnFocus I was looking for which highlights the active field. (I don't see this as an option in ADDT?)

                                Overall, I'm making great progress with my project & could not have done it without DW & ADDT. Spry just adds a bit more visual class & functionality to my pages.

                                My previous post here is my real stumper:
                                http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=263&threadid=1289171
                                Referencing a "checked record" from my Nextensio Dynamic List (Integrating Spry Menu bar with ADDT Dynamic Lists)

                                This kind of functionality seems like a good idea but so far I have been unable to find any explanation of adding the ADDT List links to the Menu. (everything seems to just mention simple links to index.cfm, etc.)
                                Cristian, would you be able to answer this? It would be much appreciated!
                                Here is a image copy of my Main page:
                                http://cerberus.clearwave.com/jerry/Order_Management_Main_Page.jpg

                                Thanks to all,
                                jlig