Solved

How to validate form and highlight accordingly?

Posted on 2008-10-02
1
456 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 12

Accepted Solution

by:
rowejd earned 500 total points
ID: 22623559
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

623 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