Solved

How to validate form and highlight accordingly?

Posted on 2008-10-02
1
433 Views
Last Modified: 2008-10-04
How can I create a form which validates an entry when clicking outside of the input field?

I have seen various form validations like SPRY, jvalidate and so on... but had problems with customizing the form and with validation on the fly; i.e. the form begins to validate as soon as the user begins to type - this could be confusing to the user since he might be getting an error as soon as he starts typing. One other typical function I did not like with these libraries is that some of them when you clear a field and click outside of the input field they request you to fill it in. A user might want to skip a field and go for that later - so I basically need something that if a required field is missing, it will be checked once the user clicks the submit button not when the user clicks outside of an input field.

So a summary would be a form that:
- validate fields when clicking outside the field (hightlight green when correct and hightlight red+error message when there is an error), having field length > 0.
- if field is required and field length < 0, check on submit
- flexible customization of form user interface


Let me know if you need any clarifications.

Thanks.
0
Comment
Question by:Rassac
1 Comment
 
LVL 12

Accepted Solution

by:
rowejd earned 500 total points
Comment Utility
Rassac,

There are lots of libraries out there, but I'm very familiar with SPRY.  It sounds like all your problems would be solved by changing the validation to occur onChange.

"i.e. the form begins to validate as soon as the user begins to type - this could be confusing to the user since he might be getting an error as soon as he starts typing"
--You can change that by having it validate "onChange" instead of "onBlur" (see snippet  of code below for example).  In the case of a pattern-enforcement or min/max character requirement or even a required field - it would only validate after the user moves to another field, and wouldn't show any error if they didn't type anything.  This way the error shows up before the form is submitted, but after the user is done with the field.

"One other typical function I did not like with these libraries is that some of them when you clear a field and click outside of the input field they request you to fill it in. A user might want to skip a field and go for that later"
--In this case, you could have your field validate on submit.  However, it's not typical for a user to skip a required field and be upset that it shows an error.  Personally I'm glad to know immediately that I missed a required field.  What's MUCH more typically confusing is this:  user clicks on "email" and tries to leave it blank, tabs to "phone" field and then sees that the email field was required (this would only happen if it validates onBlur).  So then he goes back to the email field, but now his phone field, too, has an error message -- so you've got two errors and it's confusing/frustrating to the user.

To remedy this, you can simply change your validation event to onChange so that if they skip one, it won't show an error...only if they change the field will it show an error.  Or you could have it validate only on submit if you would rather.

SO...your requirements:

- validate fields when clicking outside the field (hightlight green when correct and hightlight red+error message when there is an error), having field length > 0.
-->Spry does this if you validate on the change event (see snippet below)

- if field is required and field length < 0, check on submit
-->Again, that's exactly what happens using validation on change.

- flexible customization of form user interface
-->Spry's css (which you can edit) and error messages between <span> tags (that you can also edit) make it quite customizable.

Hope it helps!
var spryField = new Spry.Widget.ValidationTextField("spryField", "none", {isRequired:true, validateOn:["change"]});

Open in new window

0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
populate dynamic drop down from a csv 3 34
update field on focusout 15 19
Phone Dialer 5 35
jqplot Pie Chart - javascript 2 7
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 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

11 Experts available now in Live!

Get 1:1 Help Now