Form validation error design

Design • UX Design • March 20, 2013 • 13 minutes READ

A couple of years ago I saw Twitter’s form validation for the first time and I was absolutely amazed. User Interface nerds among you probably know what I’m talking about. At the time we were almost jumping with excitement.

The discrete charm of well-designed form validation in Twitter’s forms was absolutely seductive. Informative error messages popped out right when I’d made an error, immediately eliminating irritation. “Inline validation” helped me understand what was going on right away. I could feel that this simple form was trying to have an actual conversation with me. That was a revelation! At the end, I didn’t have to wait for a reload of the whole page to check if the form was filled in with the right data.

This experience completely changed my approach to the design of forms. It helped me understand that form validations are meant to have conversations with users and guide them through the difficult times of errors and uncertainty.

The term “form validation” might need a little bit of clarification. Form validation is the technical process where a web-form checks if the information provided by a user is correct. The output of this process is emotional rather than technical. The form either points out that the user made an error, or assures that the provided data is accurate. To give you an example: if a user provides the data in a form field labeled “email address” the form should check if the provided text is in the right format (user@example.com) and if this e-mail address isn’t already registered.

Generally speaking, there are two types of form validation:

1. After submit validation – when the user provides all the data and submits the form, usually by hitting the button, the information is sent to the server and validated. The response of the “validator” is sent back to the user’s computer and it’s visualized as either a confirmation message (“everything went fine!”) or a set of error messages.
2. Inline validation – validation messages are shown immediately after the user types in data to form fields. Usually, information is shown next to the fields and encourages the user to take immediate action.

Importance of Form Validation

Form validation is at the center of communication during the most important processes of interaction between the web/mobile visitor and the interface. Its importance exceeds its size and perceived simplicity. Don’t believe me? Consider when you can typically encounter form validation:

• Sign-up/sign-in forms
• Shopping cart – check-out forms
• Newsletter forms

That’s a bunch of important moments in your interface life-span, right? The business side of your endeavor probably hangs on this.

Let’s compare the online to the offline world. This always puts things into a familiar perspective.  Let me make a simple analogy: form validation is the equivalent of having a conversation with a salesman right before a purchase – when everything is still on a knife’s edge. If the salesman is impolite and refuses to provide any assistance, you’ll certainly leave the shop without completing your purchase. If the salesman is professional, polite and helpful – you’ll reach for your wallet.

Most form validations are as rude as the rudest salesman. Forms with error messages such as “Database error!”, “Wrong e-mail!” not only fail in terms of savoir-vivre – they usually result in a high drop-out rate.

Poor communication leads to poor business results and there is plenty of proof for that. Research conducted by Luke Wroblewski clearly shows that using properly designed inline form validation might make a tremendous difference:

“When compared to our control version, the inline validation form with the best performance showed compelling improvements across all the data we measured. Specifically, we saw:

• a 22% increase in success rates,
• a 22% decrease in errors made,
• a 31% increase in satisfaction rating,
• a 42% decrease in completion times, and
• a 47% decrease in the number of eye fixations.

This shouldn’t be ignored. Designing form validation in the right way might have a huge impact on your business!

And this is the point when we leave theory and jump into practice. Let’s see what the best players in the field designed and then we’ll learn how to step-by-step design perfect form validation.

Excited?

Each example used below can be uploaded directly to UXPin – The UX Design App as a reusable wireframe template.

Avoid confusion

Generally speaking there are four important elements that good form validation consists of:

1. Right time of informing about problems/success
2. Right place for validation messages
3. Right color
4. Clear language

All these factors have one clear goal: to avoid confusion. Confusion is the arch-enemy of conversion. If you don’t want to risk a sky-rocketing drop-out rate, create validation that eliminates any risk of your customers being confused. That’s the road to a high conversion rate.

Right time

As we could see in the example of Luke Wroblewski’s research – the right time to inform about the success/failure of provided data is right after the user has submitted the information. Inline form validation that immediately informs users about the correctness of provided data results in an increase in the conversion rate.

Twitter is an obvious example here. They did a great job of avoiding user confusion.

On the screen below you can see that I’m trying to register with an e-mail address that was already used. The form informs me that I should stop right at the second step and consider some back-up options, so I won’t be disappointed with the final result. A classic “after submit” validation would wait for me to fill in the whole form, reload the page and then it would let me know that something was wrong.

Twitter chooses a better time to stop me – there’s no doubt about that. The immediate response of the form saves me a massive loss of time (yes, today even 3 minutes is a massive loss).

And what’s even more amazing – Twitter is actually trying to have a conversation in this critical moment of our acquaintance. Thanks to inline validation, they can immediately offer me some options. Perhaps I’m the owner of the account registered with the e-mail and I just wanted to log in? Who knows – maybe I’ve just forgot the password?

This is not only great form validation, which adds a lot to the conversion rate; it’s also a top-notch customer service.

Twitter Form Validation – Error Message

Twitter Form Validation – Error Message – Upload Wireframing Template to UXPin

Right place

The place of the validation message is as important as the right time of showing it. On the discussed Twitter example – if the message wasn’t next to the field, but placed somewhere below, I wouldn’t manage to notice it quickly. If I didn’t notice it…well, that would just be confusing and dangerously close to forcing me to leave the form without finishing the process.

When you’re wondering what place to choose for your validation messages, follow this rule of thumb – always place the message in the context of action. If you want to inform the user about an error occurring in a particular field – show it next to the field. If the error is general (e.g. a problem with sending data to the server) and there wasn’t a reload of the page – show the message next to the submit button, if there was a reload of the page – show it at the top of the page.

Take a look at the example below. Light CMS shows error messages next to each field. That’s really easy to notice and understand.

Light CMS Form Validation – Error Message

Light CMS Form Validation – Upload Wireframing Template to UXPin

Etsy’s form is also a great example of well placed validation messages. In this case I also really like the construction of the form and the visualization of error messages. The clear division into sections (Sign Up Using Facebook, the main sign-up form) provides clear guidance through the sign-up process.

Error messages have a lovely visualization – with a red border around form fields and red message boxes – the intention of the communication couldn’t be clearer.

That’s a good attempt at eliminating confusion from the form.

Etsy Form Validation – Error Message

Etsy Form Validation – Upload Wireframing Template to UXPin

 If the construction of the form doesn’t give you too much space for a clear error message, follow the example of Vimeo.

Vimeo Form Validation – Error Message

Vimeo, using tooltips pointing at specific form fields with errors, avoids lots of confusion. The color-based correlation is also helpful. A red error message corresponds with a red background and red border of a field with errors.

Error messages are placed in the context of action (in this case an error) and that’s the foundation of clear communication.

Of course the problem here is the “after submit validation” which makes people wait till the validation of the form is done on the server. However, in the case of such a short form, I wouldn’t expect it to be a critical design error.

Vimeo Form Validation – Upload Wireframing Template to UXPin

Right color

Color – is easy as 1, 2, 3 – red is for errors, blue for information, yellow for warnings, green for the confirmation of success. This color system is the most intuitive you can imagine. At least part of it (red & yellow focus attention and raise blood pressure) is backed up by evolution and the whole system of color – meaning is present e.g. on the roads. Don’t confuse it and you’ll be ok.

On all the examples above we’ve seen this rule in action. Let’s review a couple more interesting solutions, so you’ll have plenty of inspiration.

Again Twitter rules when it comes to proper form validation. Confirmation messages are extremely clear with the green color and the little “check” icons add to the overall greatness.

Pay attention also to the password field. The green indicator inside the field shows how safe your password is. Now that’s a home run. Love it!

Twitter Form Validation – Confirmation Message

Twitter Form Validation – Upload Wireframing Template to UXPin

Pinterest is also an interesting example of the smart usage of color in validation messages. With a red box around the whole field, the danger of an error is emphasized. The addition of neatly done inline validation makes it a truly anti-confusion solution.

Pinterest Form Validation – Error Message

Take also a close look at the construction of the form. Six fields are visually divided into two sections. One is all about logging in to the service and it’s somehow formal. The other is personal – First Name, Last Name and Gender. The division makes a lot of sense because your last name and gender aren’t obligatory.

However, not indicating that some fields are obligatory and some aren’t, is on the verge of being a dark pattern. People might feel tricked into filling in their last name and gender (which might be used for advertisement targeting reasons).

I can see their very efficient strategy of gaining data, but I would be very careful with such practices. Usually, I recommend asking users for non-obligatory data after the sign-up process.

Pinterest Form Validation – Upload Wireframing Template to UXPin

Right language

Finally – language – that’s the tough one. I spent hours looking for examples worth mentioning and didn’t find anything that was perfect.

A validation message should clearly state:

–  What happened

–  What’s the next step the user should take to succeed (this doesn’t necessarily apply to the confirmation of success messages)

And should always avoid using technical jargon.

The rules are simple, but somehow they are very easy to ignore. A typical error might state that “the email is invalid” without telling the customer why it’s invalid (a typo? Is it occupied?). This brings confusion on board. A risky business.

Of course, again, Twitter is an example of the usage of clear and crispy language. When they say that your e-mail address is OK, they use a confirmation message to say “we’ll e-mail you confirmation”. If the e-mail is already registered, they give you the option to log in, or recover your password. If you manage to create a perfectly safe password, Twitter will tell you “perfect password!”.

Now isn’t that nice? It’s all about having an ordinary conversation.

Delicious makes lots of mistakes in their form and its validation, but they handle the language side in an interesting way.

Delicious Form Validation – Error Message

First of all, and I absolutely love it, they added a little info to the password field “Try using a sentence for a strong password.” Isn’t that helpful? I’ve been waiting to see something like that for a long time. It makes a lot of sense when it comes to the safety of a password. Much more than requiring people to type a capital letter and a number.

Secondly, Delicious beautifully inform about an error with choosing a username:

1)  “Sorry, the username ‘marcin’, has already been taken” – clear information about what happened.

2)  “Please choose another username” – clear call to action

However, they lack a back-up option. Perhaps I just forgot that I had an account?

Anyway, Delicious broke the rules of right time, right place and color… but, thanks to the right language, their form is still rather usable. This is how important language is.

Delicious Form Validation – Upload Wireframing Template to UXPin

Sum up

We’ve seen some great work on form validation, but we haven’t seen perfection yet. This is something that we’ll build on our own to demonstrate how easy it is to follow the four rules of designing the right form validation:

1. Right time of informing about problems/success
2. Right place for validation messages
3. Right color
4. Clear language

Time for a step-by-step tutorial!

By following our 4 simple rules mentioned above, we’ll create perfect form validation. Form validation that will minimize the risk of losing a customer on the way to the ultimate goal of the service.

Just to prove my point, I’ll design a form with a section of additional, non-obligatory, information. Something similar to Pinterest’s form. As I said, usually I wouldn’t recommend doing it that way, but if you really must, there’s a couple of things you can do to make it easier for people.

I’ll start with the structure of the form and a header. The structure is really easy. The white part is devoted to obligatory fields, the gray part to non-obligatory, additional information.

I’ll just draw simple boxes, to fix the space and give my design a structure.

Then I’ll add a header – something very plain, putting persuasive information into the sub-headline. Again – I’m looking for an anti-confusion solution.

2. Form Fields

In the next step, I’ll add form fields and labels. Since I’m strongly against labels inside the fields (very confusing, if you start to write something inside the field, stop for a couple of minutes and then want to start again… there’s no indicator of what you should write in the field), I’ll place them above the form fields.

Additionally, I’ve added two sub-headers that explain what types of information need to be provided in each section.

3. Form field Information

Form field information is something that’s often omitted, but in reality it’s very helpful as a start of the conversation with users. By using one or a maximum of two sentences, you can explain some risky things like “why do you need my e-mail?” and build basic trust.

I’ll add information next to almost all the fields:

• Username – “It’s the name other members of XYZ will see. You’ll also use it to log in.”
• E-mail address – “We’ll send you a confirmation message and use your e-mail for basic communication. Don’t expect spam :)”
• Password – “To increase safety – use a whole sentence. Easy to remember – hard to break!”
• First Name – “We’ll be able to call you by your real name in our communication!”
• Gender – “It’ll let us adjust the service here and there a little bit!”

This additional information might not be critical, but it’s the starting point of a “relationship”. It’s better to say more, than to confuse users.

4. Error messages

When it comes to error messages, we need to really carefully consider all of our rules.

• The right time to show the message is right after the error is spotted. We’re going to design for inline validation.
• The right place is next to the field – so I’m going to replace additional information next to the field with an error message
• The right color is of course red and I’m going to put a robust box underneath the whole field with an error
• Clear non-technical language – no “database error” etc.

Take a look at the result:

I’d like my error messages to “explain” and “guide” people through the process. I’m trying hard not to leave any doubt, which can result in leaving the form without correcting the data. Here’s the full text:

– Username error – “That username is already in use and we need them to be unique. If it’s yours try to:

*  Log in or reset your password

If it’s not yours – “come up with a new username”

– E-mail error – “There’s something wrong with your email. Check if you typed it in correctly. Perhaps you missed “.” or “@” somewhere?”

– Password error – “Try to come up with something longer. A sentence is a really good idea! If you like the risk – the minimum accepted length is 3 signs.”

Can you see the pattern in these error messages? I’m stating clearly that there was a problem and immediately I’m coming up with a solution.

5. Confirmation messages

And finally – confirmation messages. These are a pure pleasure to design. Since they pop out right after typing text into the fields, I’ve decided to come up with a more subtle solution. I don’t want people to stop on the confirmation message. They should scan it quickly and go to another field feeling good about the previous step.

No heavy colorful boxes, not long sentences – just a quick confirmation.

And that’s it! Easy as 1, 2, 3. Form validation aligned with our four rules. It didn’t hurt, did it?

Designing of forms and form validation should also follow proper UX practices. In this article, Form Validation UX And Best Practices, we will discuss the following topics:

How to create a form validation (a step-by-step tutorial)

Today, we’ll be examining what form validation is and why you, Joe Webdesigner, should care about it. Here’s a teaser: it’s one of the easiest ways to improve the usability of your designs and most web designers forget about it all the time! We’ll also showcase some examples of great form validation design. Read on young grasshoppers… knowledge awaits.

What Is Form Validation?

In the context of a human relationship, validation is when you feel the need to be told that you are right; In the context of a web-form, validation is when the form tells you that you’re wrong. To be specific, form validation is the process where a web-form checks to see if the information that’s been entered into it is correct.

For example:

• If a field is marked «Email Address», the form might check to see if the text that’s been entered is a valid email address.
• If the field is marked «Phone Number», the form might check for a specific formatting (or a certain number of digits)

You get the idea… validation just makes sure that the user hasn’t made a mistake.

It’s human nature to make mistakes though, and unfortunately, your web form probably isn’t exempt to human error. This is where validation plays it’s part in a user-friendly form. A simple visual reminder to the user that something isn’t filled in properly can make all the difference between the joy of a successfully filled out form and the intense frustration of having to guess what went wrong.

Why Do You Need to Design For It?

The primary principle of good form validation is this: «Talk to the user! Tell when them something is wrong!»

Integrating validation into your web designs isn’t hard… but the vast majority of designers never include designs for it. Why? Because validation is often left for developers to worry about at the last stages of a project.

This creates a scenario where you, Joe Webdesigner, are entrusting one of the most crucial aspects of the user experience to a developer who probably doesn’t know or care how the validation should be designed. Heck, in lots of cases, developers won’t even bother with anything beyond the most remedial form validation… which can leave users frustrated.

This isn’t a dig at developers or anything (and there are lots of great devs that will handle this with flying colors), but let’s assume the dev isn’t paying attention for the sake of argument.

Examine the following graphic:

Something appears to be wrong on this form… but the user is forced to guess what it is.

What’s wrong with this form? Sure — the form is «validating» itself by telling the user that something is wrong… but the user is left to guess what it is.

The primary principle of good form validation is this: «Talk to the user! Tell when them something is wrong!»

Let’s examine the next graphic:

Eureka!

Much better right? Now the user is given the information they need to fix the problem. This is a simplified example, but notice how integrating a basic response system improves the usability by leaps and bounds.

The 3 Common Types of Form Errors

Now that you understand what validation is, you hopefully want to apply this to your web forms. There are generally three mistakes that users could run into in your form:

Formatting Errors

This is probably the biggest problem users will encounter. Have you ever filled in a form only to find out you put an illegal character in the username field, or used a space in a web address? That’s where formatting validation comes into play.

Most fields in a web form are just alphanumeric, however, if you have an email, web address, phone number or password field, you may have a specific formatting required. You can probably guess the syntax of each field. So formatting validation is effective if you have specific information in mind.

Required Fields Errors

These errors happen when a user forgets / neglects to fill in a field that you’ve specified as «required».

Match Errors

This happens when you need to check if one value equals another. This is so important in login forms especially, because you don’t want to allow users to login if their password doesn’t match the correct one.

It can also be used to make users retype their email or password when it’s vital they don’t make a mistake.

The Design Solution

While you can style your form a thousand different ways, there are generally three basic steps to helping your user fix the validation problem:

1. Inform the user that there is a mistake somewhere on the form.
2. Highlight the field that’s incorrect.
3. Show them an example of what you are expecting. (ie: email@email.com)

Color is one of the best tools to use when designing validation. Because it works on an instinctual level, adding red to error messages, or green to success messages is incredibly powerful.

Proximity is another important tool — keep specific notifications near to the problem fields and keep messages about the entire form away from any individual fields. If you can create custom «skin» solutions that make these strategies even more obvious (like making the notification look like it’s physically attached to a specific field), you’ll do even better.

It’s also a good practice to tell your users in advance where they could create errors. Many websites include a side-bar box with instructions on how the form should be filled in. Others have the correct syntax described under the label. Either method works, just as long as it’s there.

As we’ll mention in the «how validation works» section below, you’ll also want to run «instant validation» when it’s possible.

Examples of Great Form Validation

Now that we’ve gone through the theory of form validation… let’s look at some examples of this in action!

While you look at these, note that the solution is always simple: a tooltip, a boxed in notification, or a piece of plain text. As long as you keep the notifications close in proximity with the problem-field, you can design, skin, or style these any way you want. The only thing to remember is that you actually give the user some advice.

Let’s dig in:

ThemeForest

ThemeForest immediately brings up an error message under the field. Successful entries even get a green «Success!» message.

Frexy

Frexy uses a simple, but effective approach: Color the field that’s wrong, and add bright notification text below. Edit: As Boba noted in the comments, the green color could be misleading to some users, but you’ve gotta balance branding and usability to your own taste.

Twitter

Twitter adds a message to the immediate right of the field to indicate error. It does so instantly… and they even add color to the response system to emphasize the message!

Mint

Mint not only validates the form fields immediately, they also give both positive and negative feedback… it’s almost as if you’re having a conversation with the form!

FancyForm

FancyForm is a form-tool that shows how useful it can be to actually provide in-line feedback in the form of icons.

Virb

Virb adds a bright message when you’ve done something wrong. Bonus Points: Virb won’t even let you type in an unallowed character! Just try it…. they dare ya.

WordPress

WordPress will give you a basic message… but what’s special is that the form itself actually shakes when you enter the wrong information.

InvoiceMachine

InvoiceMachine uses the simplest approach. Instead of textual help, it colors the background in red to signify a problem. Keep in mind that a text-tooltip when the user hovers over the form would improve this even more.

WPCoder

WPCoder shows that a simple Javascript popup can work just fine as well.

Yahoo

Yahoo uses a humorous approach… rather than returning a basic error when a birthday is incorrect, they give you a little bit of attitude.

How Validation Actually Works

From a technological standpoint, there are two different ways to integrate validation in a form:

• Server-side validation is where a user submits the form, and the contact form script will analyze the content and bring up an error if the criteria is not matched
• Client-side validation is the type of JavaScript validation you may see on some modern forms. This is where instant feedback is generated on a field-to-field basis without submission.

Client-side validation offers the most user-friendly alternative because it can show the feedback live and instant so the user can immediately rectify their mistake. However, a major downside to client-side validation is that it generally relies on some sort of JavaScript. Therefore, if the user has JavaScript turned off, they will not see the live validation. So, be sure to still be able to fallback on server-side validation

You can read lots more about the technological side of validation at our network site, Nettuts!

Final Thoughts

The best forms are those that anticipate user-behavior. It’s important to plan a form out and understand how a user could make mistakes before it even gets built. Why? Because if you can anticipate a problem spot, it’s easy to design a solution to help users get past it. However, leaving the validation design until the last minute can be expensive to fix once the coding is complete. Taking some extra time to design strategies and styling for your forms will save time, money, and frustration in the long run.

Did you find this post useful?

Connor Turnbull is a part-time writer covering the technology industry and part-time web designer from the United Kingdom. Connor previously wrote for AppStorm where he covered Android and Google news.

Table of contents

• Intro
• Composing error messages
• Selecting the right place
• Validation modes
  • Aggressive
  • Passive
  • Lazy
  • Eager
• Help your users
• Practical examples
  • Facebook
  • Steam
  • Name.com
• Afterword

Intro

Forms are essential parts of any user interface. They differ from a single input and a button, ending with huge complex forms containing multiple sections.

The validation process often accompanies forms. For developers, it might be clear how the form should be filled.

But remember that there are so many circumstances you have to take into account.

Your users can be children. They can be old. They can be tired. They can be drunk.

They can fill the form from mobile. From tablet. From desktop.

In a car. In a cafe. At home.

They can even be drunk, in a car, with children, and filling the form from a tablet. 😊

Once I worked in a company that specialized in real estate searching. They had a site where you could place an advertisement when you wanted to sell a house.

I worked in the company as a UX-intern for a month. The whole month we were researching how users fill the advertisement form and their mistakes. Just imagine, the whole month…😱

At first, validation might look like a simple process.

You find some javascript library, put validation rules, and that’s it.

However, validation is a very complex process in terms of user experience, which is often underestimated.

The aim of validation is not to pass your data to the server correctly. It’s about helping users fill it with less effort. Your server still needs validation.

The main aim is to reduce interaction costs.

Here I want to show you some useful tips regarding the validation process.

Composing error messages

First of all, the messages themselves should be explicit. This means that you should clearly indicate what’s wrong with the data user entered.

Bad example: «Your password is wrong.»
Good example: «Your password should contain at least 6 characters.»

Then, the messages should indicate what user should do. This rule is applied to the whole UX area. When the user received a message, he shouldn’t be left with no clues of what to do next.

Bad example: «Something went wrong, sorry!»
Good example: «Looks like someone has already used your email, please, use another email address.»

I don’t claim that my English is good. My purpose here is to show that there should be some indication of what to do next.

This is quite common when you get an error message in an app, which says that something went wrong, but it doesn’t provide any information on what to do next. Apps just leave users alone, and this doesn’t help them to do their tasks.

The messages should be human-readable, meaning that you write for users, not for machines.

Bad example: «Ooops, the server responded with 500 code.»
Good example: «Something went wrong on our side, we already received the error & our team is working on it. If it’s urgent, contact our support at support@app.com.»

Again, I may be way too wordy here, but I want to transmit the main idea.

Selecting the right place

There are two main principles of showing validation errors: inline and after the user submits the form.

In the case of inline validation, the error messages are shown next to the input fields. While in the case «after the user submits the form» it may vary: you can show all validation errors at once next to every input or show them in the beginning/at the end of the form.

The best place to show validation errors is inline. The reasons are obvious:

1. User will notice it as soon as he makes a mistake
2. He can fix it as soon as he notices it
3. No need to scroll & find inputs which are filled incorrectly

When user types in a certain field, he is in the context of this field. So if we show him an inline validation error, we will not switch the context: he knows which field we are talking about.

While if we show him all errors at once, it will result in high interaction costs.

Compare these two approaches:

Inline:

1. User types in email
2. Gets validation error
3. He knows that he has just typed his email, so he even doesn’t have to read the message. If he sees something red around email input, then he knows that something’s wrong with what he has just typed in
4. Easily fixes it

All at once:

1. User types in email
2. User types in the name
3. User types in the phone number
4. Presses submit
5. Gets few validation errors. He has to read them to understand what he has typed wrongly

It’s clear that in the second case, we ask much more effort from him than in the first case.

Validation modes

One is the most important part of the validation process if when to trigger validation errors.

Here I love how vee-validate handles this: https://logaretm.github.io/vee-validate/guide/interaction-and-ux.html.

So there are basically four modes:

• Aggressive: Triggered when the user presses a key on input.

• Passive: Triggered when the form is submitted.

• Lazy: Triggered when the user leaves the input (on blur or change).

• Eager: This is a combination of aggressive and lazy, as it first validates when the user leaves the input (on blur or change), then if the input is invalid, it will behave aggressively until the input is valid again, and it will go back to being lazy.

Now, let’s consider these modes from the UX point of view.

Aggressive

This is one of the worst.

In this case, when the user has just started typing, you immediately validate the input. Which in 99% of cases leads to the error being shown.

But the user might actually know how to fill the input correctly. He can’t do this instantly.

In most cases, I wouldn’t recommend this approach.

Passive

This one is better.

In this case, you show validation errors when the user presses submit. I believe for simple forms that contain a couple of inputs it may be applicable.

But if you have a large form containing multiple inputs divided into different groups, don’t use this mode.

Imagine the user has copied bank account information from a paper to the form, as well as email, password, random other fields. And then after submitting the form, he gets a dozen errors? Looks scary.

Lazy

In Lazy mode, the validation is triggered when the user leaves the input.

It is much less annoying than aggressive mode and, in my opinion, is pretty nice.

The user finished typing, decided that he has typed everything correctly, and then switched to the next input.

But this approach has one significant drawback. In case the user made a mistake and returned to the input to correct it, the validation will trigger only when he switches to the next input.

Imagine the user typed the wrong email, returned to the input to correct it, corrected it but hasn’t yet switched to another input and still sees the error. That’s not nice.

Eager

The eager mode is a combination of aggressive and lazy, as it first validates when the user leaves the input.

If the input is invalid, it will behave aggressively until the input is valid again and will go back to being lazy.

So, how it works:

1. User typed an email. While he was typing it, we do not validate his data
2. User switched to another input. If he made a mistake in an email, we show him an error (like in lazy mode) and turn the input in aggressive mode.
3. User returned to the email input and started fixing his mistake. As soon as he fixed the error, we remove the validation message. We don’t wait till he leaves input as in lazy mode. We’re in aggressive mode.
4. Now, the input in lazy mode again.

Looks pretty good.

Help your users to fill the form correctly

You should help your users to fill the form as much as you can. What can you do?

1. Break large forms into groups of inputs
2. Indicate which fields are required
3. Pre-fill inputs when possible
4. Provide masks when possible (e.g., phone number format, dates, etc.)
5. Provide hints. For example, when the user types in a password, which should have some complexity, you can always show the user how well he does.

Consider showing the user that he has filled an input correctly.

For tiny forms, like the login form, it might not be necessary. However, if the form is complex, it might be a good idea to show users right away that he’s doing well.

Another example: you have a signup form. Your site is popular, so there is a high probability that the email is already taken.

The user has entered the email and switched to the password field. And nothing happened. He might be a bit worried if the email is taken or not.

To reduce possible stress, you can show right away if the email is acceptable or not.

Practical examples

I’m not that good at writing. Instead, I’d better show some examples of poorly designed validation forms I found on the Internet.

Facebook

Here is the Facebook signup form.

Apart from making labels inside inputs, which is generally considered a bad practice, Facebook also hid validation error messages under icons.

So to understand what I’ve done wrong, I need to click (not even hover) the icon.

Instead, it’d be better to show the messages explicitly.

Next, Facebook has special rules for user passwords. In case the user didn’t follow the rules, he’ll get the next error: «Enter a combination of at least six numbers, letters and punctuation marks (such as ! and &).»

However, it’d be better to show how the user is doing when he’s typing the password. Something like this:

Steam

Let’s check out Steam’s register form:

Okay, so, a simple sign up form took the whole screen…🤔

1. Why not tell me that I’ve typed the wrong email as soon as I did this?
2. Why should I confirm the email address if, after submitting the form, you’ll send me a verification link? It looks like I should verify my email twice for you?
3. All errors are placed at the top in a single message. It takes time for me to look up at the error alert and then figure out what fields are wrong.
4. «And find more errors highlighted below.» Okay, you’re a machine, why you require me to do the work of finding errors? Tell me right away. I understand that you highlighted the fields, but still…
5. By the way, you haven’t highlighted the captcha

Name.com

Honestly, I got no idea what’s the site is about. I’ve just typed in «create your account» on google, and it seems like it’s a popular site

But it has quite a few validation errors.

So, let’s take a look at the form.

Woah, your form looks really big. It’s okay. Sometimes we have to ask the user a lot of questions. But again, why not show validation errors as soon as I’ve filled an input?

See, I’ve made so many mistakes: wrong phone number, wrong email, wrong zip code. After I click the submit button, you don’t even bother to scroll me to the first invalid input!

By the way, this is awesome hint: if the user clicks submit and some inputs are wrong, scroll him to the first error! There are plenty of solutions:

https://github.com/logaretm/vee-validate/issues/2395
https://stackoverflow.com/questions/60870424/vuetify-vee-validate-scroll-to-the-first-validation-error

But back to the form. Here is a list of mistakes:

1. Show errors inline, as soon as the user has finished entering data in an input
2. Provide masks for phone number/zip code. If possible.
3. My own preference: I’d make the form more compact, way too large.

Good thing you show me how good I am at entering my password though!

Afterword

The main thing you should take from this article: always follow common sense. EVERY rule can be broke. There are really MANY circumstances which you should consider.

Your users are developers who are using vim for writing their essays? They use the console browser, maybe lynx? Oh well…

Or maybe your users are old citizens? Then make your inputs BIGGER. They might not have a good vision.

Or maybe your users are children? Then make your inputs colorful. They will entertain them!

Just think about who your users are and research how they might use your app.

Thank you, Victor

P.S. I tweet about UI/UX stuff from time to time https://twitter.com/vponamariov 😊