Exciting! Here would be my (humble) suggestions:
1. Required fields. As a general rule, you should have a * asterisk to the left or right of the input field in a straight vertical line to indicate required. Bold is ok, but it's not quite enough to let the user know. 2. When the user clicks submit, it puts all these words on the right in red. Its sort of overwhelming. Highlighting the input field is more important than red to the right. Red to the right makes more sense as Inline errors. Like email or password format. 3. It still could use something at the top. Like "You missed X field(s). They have been highlighted below. This implies you should scroll to the top of the form when submit with this kind of error. Think of a long form, where the user clicks submit and missed the very first field. It would be offscreen otherwise. 4. When doing it right, the checkbox is a nice touch, but I would make it a little more subtle. Additionally, use Swiss Design techniques. This means everything lines up. So all the checks line up vertically. 5. As a general rule, I usually make form fields taller. Users have terrible fine motor skills. A big box is easier to input. Check out the username and password fields in Wordpress. http://www.commadot.com/wp-admin 6. Onblur of the password field. it's usually good practice to erase the field once you have a mismatch. It's near impossible to try to fix it with the stars there. Maybe that could be an option in the setup? like errorClearInput: false; or whatever. 7. Looking at the setup. I like the {0} to represent the number, but what if the number is 1. Then it would say, Enter at least 1 characters. Singular vs. Plural. It's a nitpick to be sure, but it's good grammar. if you could say minLength: String.format("Enter at least {0} character{"s"}") or whatever...something to say greater than 1 gets this otherwise, default. It's not critical, but its a nice to have. I recently just launched a form that I tried, but couldn't use the validation plugin.. Check out the form. I actually have some issues with it, but its ok. http://app.marketo.com/signup/signup/code/standard Notice the tooltip on the password. I used hoverIntent. Cool plugin. That would be a kickass addition to your validator. Like have a "hint" declaration which would insert a questionmark with hover attached. And if hoverIntent exists, then it could use that instead? Anyway, I hope this helps out some. :) Glen On 6/11/07, Jörn Zaefferer <[EMAIL PROTECTED]> wrote:
Hi, I've uploaded a preview demo of the upcoming RC2 release of the validation plugin. It features the signup form of Remember The Milk: http://jquery.bassistance.de/validate-milk/demo-test/milk.html The plugin handles keypress- and blur- for normal input elements and change-events for radio/checkbox buttons. It tries to give feedback to the user as early as possible, without disturbing with messages before the user had a chance to enter the correct value. In other words: You can tab through the fields without seeing a single error message pop up. Once you start entering something in a field and blur, it gets validated. If you go back and correct the entered value, it gets validated on instant, showing you a success-icon. Radio and checkbox buttons get validated once you change them (using keyboard or mouse). Once an error message is displayed for a field, eg. when you click submit and the field is invalid, the plugin updates the validation status as soon as possible. Give it a try, your feedback is priceless. -- Jörn Zaefferer http://bassistance.de
