• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 687
  • Last Modified:

Spry Form Validation error notification at bottom of page

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.

Thanks!
0
digitility
Asked:
digitility
  • 4
  • 3
3 Solutions
 
Mark BradyCommented:
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.
0
 
Jason C. LevineNo oneCommented:
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 this...it 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.
0
 
digitilityAuthor Commented:
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;
   }
}

With:
onclick='verify();"
in the submit, but it isn't working.  I suspect the Spry is interfering.  Can I do both without having a problem.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
digitilityAuthor Commented:
OK I found this solutio, which is exactly what I need.
http://labs.adobe.com/technologies/spry/samples/validationwidgets/Single_error_message_onSubmit.html

However, it doesn't look like the same Spry (different includes) as what Dreamweaver 5 includes.
0
 
Mark BradyCommented:
Well if you can modify the code to suit your form then go for it. If you want a javascript solution just ask.
0
 
Mark BradyCommented:
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.
0
 
Mark BradyCommented:
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!
0
 
digitilityAuthor Commented:
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.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now