The UX of form validation: Inline or after submission?

Forms are an integral part of UX design. Whether they’re for logging in, gathering feedback, or collecting user input, they help facilitate user interaction with digital interfaces. But as with any data input process, errors are bound to occur. Therefore, we need a method for identifying or even preventing these errors. Enter form validation.

In this article, we’ll explore the role of form validation in enhancing user experience by discussing:

• The importance of form validation in UX
• Inline vs. after-submission validation approaches
• Understanding inline form validation
• Exploring after-submission form validation
• Considerations for choosing the right approach to form validation

If you’re ready to explore form validation in UX, let’s get to it.

What’s form validation?

Form validation is the process where a website or application checks the data entered by a user to ensure it is correct. There are two possible outcomes: 1) the data is accurate, in which case, the user gets the go-ahead, and 2) the system spots an error and draws the user’s attention to it.

Take a signup form, for instance. When you enter your email address, the system checks to see if it follows the standard format ([email protected]) and if it hasn’t already been registered.

But why is this process necessary? You’ll soon find out as we’re about to discuss that.

The importance of form validation in UX

In the digital world, users enter data through forms during registration, login, shopping checkout, or feedback submission. Form validation ensures that this data meets the required criteria, thus increasing efficiency and ultimately leading to higher conversion rates.

Does that mean that form validation affects conversion rates? Absolutely. Research has shown that nearly 70 percent of users will abandon a form if they encounter complications. This abandonment can be permanent, leading to missed opportunities for conversions. We need form validation to avoid these complications.

But it’s not enough to just know about form validation. Knowing the types of form validation and when to use each one is equally (if not more) important. So, let’s get to that.

Inline vs. after-submission validation approaches

Generally speaking, there are two approaches to form validation:

1. Inline validation:In this approach, the user receives validation messages immediately after entering their data into input fields. The message is usually displayed close to the input fields needing attention to facilitate prompt response from the user
2. After-submission validation: Just as the name suggests, the user gets a validation message after submitting the form

To be fair, both approaches have their merits. Yet, designers and UX professionals have differing opinions about the more effective validation approach.

We won’t get into the debate on which is more effective. However, we will explore each of these methods, their merits (and demerits), and also discuss some considerations for choosing an approach.

At the end of the discussion, you’ll be well-equipped to choose the most appropriate method for your needs.

Over 200k developers and product managers use LogRocket to create better digital experiences

Learn more →

Let’s start with inline validation, shall we?

Understanding inline form validation

This approach gives the user a validation message before they click submit. It can provide several types of real-time feedback:

• Draw the user’s attention to an inappropriate input
• Confirm an appropriate input
• Suggest valid inputs
• Provide updates to keep users within necessary limits

An example is this validation message from Mailchimp. Notice how it uses red to draw the user’s attention to the invalid email:

However, when the user enters their email in the correct format, they get the go-ahead (indicated by the green tick):

And when it’s time to choose a password, it lists the criteria for valid input and updates the user to keep them within limits:

As you may have already deduced, this validation approach has many benefits. Let’s explore some of them:

1. Real-time feedback: You get immediate feedback on your input. So you don’t have to wait to complete a form before getting feedback on the validity of your data
2. Error prevention: As inline validation can detect and flag mistakes while you enter data, it plays a proactive role in error prevention. It saves time and prevents frustration
3. Improved user guidance: By providing real-time feedback and updates on the validity of input, this approach helps guide users through the form completion process. So users are prevented from making mistakes that could result in failed submissions

But as we all know, there are no perfect solutions. Inline validation also has some drawbacks. Let’s check them out:

1. Possible user distraction: The constant feedback as users complete a form can be distracting. In the book, Designing UX: Forms, Jessica Enders puts it this way: “With inline validation, users have to repeatedly switch between two quite different mental modes: form-filling and error-correcting. This slows the user down, increases cognitive mental effort, and generally reduces user satisfaction.”
2. Premature error messages: A premature message occurs when the inline validation logic triggers an error message before a user has entered all the necessary information. If you’ve ever encountered one of these messages, you’d know how frustrating it can be
3. Increased complexity: Handling real-time validation requires more code and logic, leading to increased complexity in the development process

So we’ve discussed the pros and cons of inline form validation. Let’s now move on to the other approach:

Exploring after-submission form validation

This approach involves validating the user’s input on the server side after the user has submitted a form or completed an action. After the user submits their input, the system performs validation checks, then either 1) returns an error message or 2) gives the user the go-ahead.

An example is this validation message from Amazon. Notice how the system flags all the fields containing errors:

While this approach may seem old-fashioned, and some may even argue that it offers a poor user experience, it has some perks. Let’s explore them:

1. Streamlined data entry: Users can concentrate on entering their data without worrying about whether there’s a mistake. So, the form completion process is quicker and smoother — no error messages to distract them until they submit the form
2. Consolidated error reporting: The user gets a detailed error report after they’ve submitted the form. This means they can view all the errors in one place, making it easier to address errors more efficiently
3. Reduced distraction: Based on Jessica Ender’s theory of completion and error-correction mental modes, the after-submission approach is less distracting for the users. Users are less likely to make mistakes as they can focus on one mode at a time: form completion or error correction

Of course, like with any other approach, after-submission has its drawbacks. Let’s explore them:

1. Higher dropout rates: Receiving bulk validation messages after submitting a form can be discouraging. Users might see form abandonment as a more feasible option than correcting errors. This can lead to a loss of valuable user data and potential conversions
2. Disruptive user experience: The after-submission approach disrupts the user experience because users have to go back to correct errors they could have addressed in real time. They may feel as if their efforts have been wasted

We’ve extensively discussed both approaches, but how do you choose which to use? Don’t worry, we’re about to discuss the considerations for picking the right validation approach.

Considerations for choosing the right approach to form validation

When faced with the task of choosing a form validation approach for a specific scenario, there are several factors you should consider. Here are some of them:

1. Form complexity: Consider the nature and complexity of the data being collected. Certain data types may require more stringent validation checks than others: for example, credit card numbers. Therefore, analyze whether the validation requires real-time feedback or validation against an external database
2. Technical constraints: What are the technical capabilities of your chosen platform? Consider factors such as the programming language, framework, and available validation tools. And then determine which validation approach will be more effectively implemented based on these factors
3. User expectations: Take the expectations of your target users into account. What validation approach are they using on similar platforms? It’s much safer to align with the validation approach they’re more familiar with to improve ease of use

Having said that, it’s not enough to know when to use a particular approach; you also need to know how to use it. So, let’s look at some best practices for implementing both validation approaches.

Best practices for implementing inline form validation

1. Use visual cues: Use visual cues such as color, icons, or tooltips to indicate the validation status of input fields. Valid entries are indicated by green or checkmarks while red and exclamation marks indicate errors. But don’t rely solely on colors. Include icons to cater to users who are colorblind
   
2. Don’t validate fields while input is ongoing: It’s best to keep the validation message until the user has finished with an input field and moved on to the next. It can be irritating to get an error message when you’re still entering your data
   
3. Write clear error messages: Keep error messages clear and concise. Always use plain, jargon-free language to let the user know the expected input and how to correct any error
4. Ensure your design is responsive: Always optimize your inline validation for mobile devices. Remember that such devices have limited screen space and are mostly touchscreen. So your validation messages should be visible and accessible without taking up too much space

Best practices for implementing after-submission validation

1. Display error summary: Provide the users with an error summary at the top of the page to give them a global understanding of the errors in the form. However, don’t rely solely on this as a way to indicate errors. Use visual cues to help the users to locate the exact error sources

   

2. Prioritize significant errors: Highlight critical errors or fields needing immediate attention. This way, the user can address the more critical errors before moving on to the less significant ones
3. Provide actionable feedback: Avoid using generic messages that don’t offer much help. Instead, use clear and structured messages that indicate the nature of the error and provide actionable guidance to help users resolve the issues

Conclusion

Effective form validation can enhance user experience and increase conversion rates. The choice between inline and after-submission approaches depends on factors like form complexity, technical constraints, and user expectations.

Whichever approach you use, ensure that users can identify the errors and understand how to fix them. Never leave your users guessing.

LogRocket helps you understand how users experience your product without needing to watch hundreds of session replays or talk to dozens of customers.

LogRocket's Galileo AI watches sessions and understands user feedback for you, automating the most time-intensive parts of your job and giving you more time to focus on great design.

See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.