If You Must Validate On Submit, At Least Validate Everything

Inline validation is the way to go – checking data as it is entered to ensure that it’s accurate. There are lots of fancy ways you can do this now with Ajax, jQuery, form building tools (Wufoo, JotForm) and so on.

But some (most, really) people still have old servers or old technology or something that means they can’t validate data until a form is submitted. Fine, I get it.

But for pete’s sake, at least validate all of the data at the same time!

In the form below from an H&M contest, I left out my email address and screwed up the CATPCHA. I’ve outlined both in green boxes.

Yet, the form only complains about the email address being missing (also note that it doesn’t highlight the field where the error occurred).

H&M doesn't validate all fields when a form is submitted.

So I added in my email address and submitted the form again.

Now it complains about the CAPTCHA. The error message says “Incorrect captcha value entered.” Will Joe Formfiller know what a CAPTCHA is? Questionable. And, of course, because they don’t highlight where the error occurred, someone who doesn’t know what a CAPTCHA is will have even more difficulty figuring out what went wrong.

H&M doesn't provide very helpful error messages.


This Field Is Really Really Required

I’m going to throw it out there – what is the point of non-required fields? Obviously the company that you’re submitting information to doesn’t really need whatever the field is asking for, so why ask for it?

The only time I can see it being necessary is for extra address information – you know, second floor, apartment number, etc. I can’t think of any other time an optional field would be useful (leave a comment if you have ideas).

So marking required fields should really not be necessary either. Best practices suggest that if most of your fields are required, you should instead mark the fields that are optional.

However, if you feel the need to mark your required fields, you really only need one asterisk. But that’s not good enough for H&M. On a contest they ran recently, they decided that you might not notice a field was required unless they used two asterisks:

H&M really really requires fields with two asterisks.


Microsoft Outlook Web Access – Password Reset Form

When I’m expected to change my password every 6 weeks, I want it to be as painless as possible (because let’s face it, my brain power is busy being devoted to having to remember a new password).

It seems harmless to begin with, looking every bit like your standard password reset form*.

Microsoft Web Access Password Reset Form

But then you get to the two buttons. “Change Password” or “Continue”. In my confusion, I just hit the “Enter” key, which thankfully activates whichever button is supposed to be pressed.

Microsoft Outlook Web Access Password Reset Form - Two Confusing Calls to Action

Apparently I did something wrong, because I got this error message: “The credentials entered are not valid. Verify that the password entered for the old password is valid, and try again.”

Microsoft Outlook Web Access Password Reset Form - Confusing Error Message

I thought to myself, “that’s weird, I’m sure I typed in my old password correctly.” I pressed the “Continue” button, went back to the form, typed my old password out in plain text in my browser location bar, copied and pasted it into the password reset form, typed in my new password, hit “Enter” (since I still wasn’t sure which button to press), and… ended up back at this error message again.

After trying a couple more times, it occurred to me that maybe the issue wasn’t with my old password, but rather with my new one. It was a password that I had previously used, and I was hoping to reuse it to control the exponential growth of passwords I have to remember. So I tried a more different password (if you don’t get the pop culture reference there, watch this: Trogdor), and lo and behold it worked.

So when they say “there’s something wrong with your old password,” what they really mean is “there’s something wrong with your new password.”

That makes sense. Bad form, Microsoft, bad form.


*I understand why you have to enter your old password first (in case you’ve left your account open on a computer and some nefarious person comes along and decides to not only play around in your account but also reset your password so you can’t access it), but in the case of MS Web Access, one of the ways to change your password is to check off the “I want to change my password” box as you’re logging in. It takes you right to the change form above. I would think that in a situation like that, you could omit the “old password” field.

Although now having reflected upon it further, I suppose it’s a safeguard against people who have passwords autofilled… the same nefarious person could autofill your password to get in to your account, but they would still be unable to reset your password. I guess that makes it ok.