Spry Form Validation error notification at bottom of page

Posted on 2011-10-20
Last Modified: 2012-08-13
I'm using the Spry Form Validation in Dreamweaver to notify users when they missed an entry in a long form.  This works great, except when the error is at the top of the page and off the screen.  Then when the user clicks submit and has a missing item, the form appears to do nothing because the error message is off the page.

I need a way to have Spry give some sort of notification next to the submit button when there is any validation error on the page.  Is there an easy way to do this?

I'd like to stick to Spry due to its nice Dreamweaver implementation, but will switch if needed.

Question by:digitility
    LVL 20

    Expert Comment

    by:Mark Brady
    If you don't get any help with spry then I will help you with javascript (works great). I'll keep an eye on this thread and see what comes out but I don't know anything about spry unfortunately.
    LVL 70

    Assisted Solution

    by:Jason C. Levine
    If the form is long enough that not all fields are visible, you should consider switching from the onsubmit validation to onblur.  Spry supports that and it means your users will get the error messages at the time of entry and not only when the form is submitted.  This is the better UX.

    As far as having a new message appear at the bottom, that's actually kind of hard with Spry.  It's designed to want to place the errors next to the field which is why everything gets wrapped in spans by default.  You can play with doesn't have to be spans, but the one constant is the error messages must exist within its Spry parent.  So if your form is in a table, each tr tag could be the Spry parent and the errors appear in any cell on that row.  But what you couldn't do is have the error appear outside of that row.  Make sense?

    So the way to do it is to use Spry listeners to detect when an error event fires and then show a new region as a result.  But this is all hand-coding and as soon as you start hand-coding, you have to ask yourself why you are using Spry instead of JQuery or a another easy form validation library like wforms.

    Author Comment

    The problem with using blur is that for required fields, the user still doesn't get notification until the submit button is pressed.

    I'm fine with hand coding... not sure how to trigger on spry event.  

    I tried adding javascript code to give a popup on missing fields in addtion to the spry notifications:
    function verify() {
          var themessage = "";
          if (document.form.FIRST_NAME.value=="") {
          themessage = themessage + " - First Name";
          if (document.form.LAST_NAME.value=="") {
          themessage = themessage + " -  Last Name";
          //alert if fields are empty and cancel form submit
          if (themessage == "")
          else {
                alert("You must complete the following: " + themessage);
          return false;

    in the submit, but it isn't working.  I suspect the Spry is interfering.  Can I do both without having a problem.

    Accepted Solution

    OK I found this solutio, which is exactly what I need.

    However, it doesn't look like the same Spry (different includes) as what Dreamweaver 5 includes.
    LVL 20

    Expert Comment

    by:Mark Brady
    Well if you can modify the code to suit your form then go for it. If you want a javascript solution just ask.
    LVL 20

    Assisted Solution

    by:Mark Brady
    Just keep something in mind....

    To validate ANY form element, firstly identify each element by it's ID tag.
    Then check it's "value"
    If the value is "" (empty) then obviously the form has a problem and you can add a custom error message to an overall variable "message". Then at the end of the function, if the message is empty ( "" ) submit the form, else display the error messages and exit the function so the form is not sub mitted. It's just basic logic and you can do that with jquery or javascript and it you use those the form will never be submitted until all fields you require to be filled are filled.

    I'm sure you know all this but I just wanted to make sure you understand how the "Logic" of this problem works. If you are really hung up on having a "Spry" solution then you need to do a tutorial or two on Spry and you will soon see how it works.
    LVL 20

    Expert Comment

    by:Mark Brady
    I have made two comments sinse the Author last posted but he fails to respond so far. I think he may have abandoned the question.

    To comment on his last comment regarding onblur(): That is incorrect. The onblur() event is not triggered when the form is submitted, it is triggered on every control in your form when it looses focus. So by a user pressing the tab key or clicking the next control with the mouse both create an onblur event.

    So you could vailidate each form field on it's own if you like and make sure it is formatted correctly (the user typed the right number or letters into the control). If not, then you hrow an error message.

    It is more common to check all the values in one script once the submit button is pressed.

    However, if you wanted to check on something like see if a username is taken already as the user types it in, then you could use an onChange() event for the input control that takes the value inside the element, then using ajax it could go and check to see if that value is in the database. There is usually a visual clue next to the element that may display something like "Available" if the usernamne that is typed in is so far "available" and if the script turns up a negative and fnds that username in the database, then you use javascript to display a message or element to the user that the name is "taken".

    There are many ways to validate your form, it depends on what you want to do exactly and your preference. Mine is using javascript of jquery and ajax to validate forms.

    A reply would be nice :)  Merry Xmas to all!

    Author Closing Comment

    Regarding onbur... I understand that onblur is triggered upon losing focus.  However you can't use onblur to trigger required field error messages, otherwise the whole form would trigger every time you clicked on a new field.  This needs to be done on submit... it's fine for other messages, just not for required fields.

    The Example I found from Adobe works perfectly... it adds an additional error message that you can put anywhere. I put it above the submit button on a long form.

    I gave points for taking the time to respond.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Photoshop CC 2015

    Photoshop has become the standard in image manipulation among professional photographers and graphic designers. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    Suggested Solutions

    Title # Comments Views Activity
    Hide row when retrieving data from database 6 23
    jquery 3 and protoype 9 23
    Table append 4 11
    JQuery tracking event. 3 11
    It is a general practice to get rid of old user profiles on a computer  in a LAN environment. As I have been working with a company in a LAN environment where users move from one place to some other place at times. This will make many user profil…
    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
    In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now