11

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: [email protected]" 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.

1
  • 1
    By the way, thanks for the plugin; it's outstanding. I've used it on many websites and it does a great job.
    – Philip Morton
    Apr 10, 2010 at 18:16

2 Answers 2

3
  • Provide the user with some sort of confirmation that their input has been accepted and validated correctly. Many UI's use the simple "tick" appended after the input field to display this

  • Allow users to know what the input field requires of them via some sort of design-based cue (eg. a default value that clears)

If I'm a user that knows what's required of me (eg. a username longer than 2 characters ), I'm less likely to try typing in invalid input in the first place. This could be in the form of a default value for the field that auto-clears on input.

Enter in your E-Mail address: [ Example: [email protected] ] (Clears on focus)

This default value could either be pulled from the field's "value" field or generated on the client-side based on the rules required. It depends on how much work you might want to put into it.

  • Some UI's are now introducing a graphic that appears in the top hand corner of the input field being validated to show users that its required (this differs from the traditional * denoter) but is just as effective.

Hope these help,

Addy

AddyOsmani.com

3
  • Thanks, good suggestions. The ticket is implemented in this demo: bassistance-plugins.googlecode.com/svn/trunk/plugins/validate/… Generating default values based on the rules sounds like an interesting idea. I have to give that a try. Do you have an example for the "required"-graphic?
    – Jörn Zaefferer
    Apr 7, 2010 at 8:12
  • Hi Jorn. No problem!. One of the places I recently noticed the required graphic idea being used is here: sachagreif.com/themes/titanium/titanium.php (scroll down) I'm sure better graphics could be used but I did think it was an interesting idea.
    – Addy Osmani
    Apr 7, 2010 at 12:45
  • I'm very much against default/hint values inside the fields (and there's a good recent article on it at uxmatters.com/mt/archives/2010/03/…) but if you mean providing a subtle hint in the same place as the validation success/error would appear then yes, that's a UX improvement over not indicating the expected format.
    – MarcusT
    Apr 16, 2010 at 11:58
1

There's a very good article by Luke Wroblewski on A List Apart: Inline Validation in Web Forms. It says that using validation while typing leads to longer form completion times and frustrations.

I'd suggest the book Web form design from Luke Wroblewski (Amazon, Google Books). It details error messages, validation, help and all topics related to web forms.

2
  • He also, further down in the article, suggest to validate while typing only after its obvious that some field has an issue anyway.
    – Jörn Zaefferer
    Apr 11, 2010 at 9:24
  • At a presentation he gave, he mentioned that the key is to allow for proper time to actually begin typing a valid entry. So, proper pausing for keystrokes for example, or validate on blur instead of key down.
    – DA01
    Jul 9, 2010 at 20:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.