I'm the author of the jQuery Form Validation plugin, which I started writing in 2006. Since then I've put quite some effort into improving the default interaction, without the developer using the plugin having to customize anything. The effort is well spent, as it enabled developers with no education at all in interaction design to get some solid improvements on their forms.
I hope to gather some suggestions here for further improvements. If you're in to that, start by playing around a bit with the default demos.
The behaviour that you'll see there is described here, to quote: By default, forms are validated on submit, triggered by the user clicking the submit button or pressing enter when a form input is focused (option onsubmit). In addition, once a field was highlighted as being invalid, it is validated whenever the user types something in the field (option onkeyup). When the user enters something invalid into a valid field, it is also validated when the field loses focus (option onblur).
The goal of these interactions is to provide feedback as early as possible, while avoid to annoy users. Displaying error messages before the user had the chance to even type something is not helpful.
One issue someone recently noted is this: (Start from scratch, then) focus a field, type something into it, delete that, tab out of the field. In that case, even if the field is required, the plugin won't say so. That someone suggested to change that, and activate the more "aggresive" validation as soon as someone started typing into a field. I'm not so sure about that.
A more complex issue is that of displaying error messages. The plugin can be customized quite heavily, as seen in this Marketo demo. Here inline messages are only displayed for rules other then required, eg. entering "foobar" as the email address would display "Please enter a valid email address, example: you@yourdomain.com" next to that field, but otherwise only "You missed 12 fields. They have been highlighted below." is displayed at the top while fields are highlighted with a red border. While that works well in this specific design, I doubt that its possible to make that the default for generic form validation that works everywhere.
Having a good default is definitely important, as even rather popular sites tend to just copy the demo code and use it as-is.
Looking forward to your suggestions and a good discussion! Let me know if I should put specific issues into seperate questions.
No comments:
Post a Comment