Whether a web form tries to capture payment details, register information or new leads, data is precious and difficult to get. For instance, according to Sumo, only 2 out of 100 website visitors opt in to email lists.

Catching user's attention is not easy either. Did you know the average person gets distracted in 8 seconds? That's a challenge! Filling up a web form has to be a smooth experience for the user. In previous posts, we dived into the best practices to guarantee conversions in sign-up forms. In this article we will address form validation considering its value as a part of the interaction design techniques, which transform the monologue of typing information into a conversation.

Form validation needs to be implemented correctly to make users' life easier. Interaction design is not, however, an exact science because customers behave in thousands of different ways. For that reason marketers, developers, and UX experts have been discussing this issue over the years - should web forms validate the users' data while they are typing, as they leave the field or when they press the submit button? What is the best option to offer a nice user experience and higher completion rates?

Although inline validation has become widely popular, some UX researches call it into question. Arengu has collected studies conducted by different specialists and platforms to weigh the pros and cons of before and after-submission form validation.

1. Validation rules: Server-side, client-side

Before entering the dichotomy, let's review the basics. Every time answers are submitted in a questionnaire, forms should be checked for errors securely, in other words, on the server. Server-side validation is a must to be protected against malicious users. As an extra, client-side validation could be added to improve the experience. Client-side validation happens on the browser, it is visible to users and lets them know if the input data is valid or not.

2. Before submission: Inline validation

Inline form validation is a particular kind of client-side validation in which answers are checked as soon as they are provided, real time. Inline validation on errors informs of invalid data, normally by using a red cross close to the box. Inline validation on errors and success informs about the wrong input and also of correct data, normally adding a green tick near the field.

Pros on inline validation

• Users' sense of progress: In theory, it motivates the customers by confirming they are on the right track when they type correctly, providing satisfaction.
• Step by step: Instead of receiving a bunch of error messages when they submit, users are notified of their mistakes one by one. 90% of web form users prefer to be told about their mistakes as they type, as some surveys show.
• Better figures: According to a test run by Etre, a London based usability firm, inline validation reduces completion times and errors by 22%.

Cons on inline validation

• Breaks the flow: Instant feedback can be counterproductive, especially in longer forms. As Jessica Enders explains in her book, Designing UX: Forms, "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 effort, and generally reduces user satisfaction."
• Early detection: You have just begun typing your email address and the inline validation displays an error message. Sounds familiar? This early inline validation is pretty common and could drive users crazy.
• Increasing errors: Two different studies concluded that users tend to make more mistakes if they are notified of their errors while filling up the form. As explained before, because of being performed too soon or because users have already entered completion mode, error messages tend to be ignored. Users continue filling up the form but the displayed messages affect them, distracting them, adding friction and lastly leading to incorrect data in the next steps.
• Double check: Some data cannot be validated on the client side because it depends on the database, resulting in inconsistencies. Inline validation can tell the customer that a specific field is ok and, when validated against the server, it turns out to be invalid. Confusing and frustrating.

3. After-submission form validation: The classic

Data validation after submission allows the users to type freely, even if they are making mistakes. The information is sent to the server only after the user submits the data. This is the classic option and for many, a vintage one, as it is believed to provide a worse experience for the user. It has its perks, though.

Pros on data validation after submission

• Go with the flow: In contrast to inline validation, after submission respects customer's concentration by refraining from bombarding them with corrections.
• Fewer mistakes: Keeping in mind Jessica Ender's theory of completion and error-correction mental modes, after-submission validation would reduce mistakes and prevent change blindness. Users are focused on completion mode and, after hitting the submit button, they will enter error correction, enhancing their attention to details.
• Consistency: All input data is validated against the server so they will be no surprises for the user.

Cons on data validation after submission

• Frustration in a batch: Receiving all errors at once can be overwhelming for the user especially if they pile up in a box, at the top or the bottom of the form. Not to mention the cases when the form is unclear on what is wrong or comes back empty.
• Reduces completion: Frustration can lead to a higher dropout.

4. Arengu's choice for a better user experience

Every method has its ups and downs, surveys and tests that support and condemn one option and the other. Arengu's approach is a mix and match. If the problem with inline validation is that, when implemented at first, it might increase errors, don't use it initially. But don't give up on it either. Apply the following recipe:

• First time with the form: After-submission form validation, respecting the customer's flow, reducing friction.
• Second time with the form: If input errors have happened, it is sent back to the customer with highlighted mistakes. Moving from a "clean" form to a form with errors prevents change blindness. Then –and only then– inline validation comes into play so that the user feels guided and can identify if is typing them correctly.

5. Extra: 3 tips for communicating errors in web forms

Regardless of the option you choose, consider these rules when deciding how to give feedback to the user:

• Be precise: Don't stack all the error messages in a big square. Place them next to its correspondent field.
• Be empathetic: Use friendly microcopy to explain what went wrong and make suggestions to help the user get to the correct data easily.
• Be flexible: When possible, try not to be too specific or rigid with the input. Users will get angry if you ask them to write their phone number again just because they left a blank space. If a specific format is required, use masks or clear explanations.