FORM VALIDATION AND ERROR HANDLING ON THE FRONTEND

In this year’s Frontstack event, I talked about From Validation and best practices for handling errors on the Frontend. I felt like I was the best person to give that talk because I work as a Frontend Developer and I have to build a form all the time. I’m not the best at validating my inputs and in fact, I only started taking it more seriously because I didn’t want to be a hypocrite. Also, I have never been happy to fill a form. If there is an option to create an account with a social media plugin and not have to fill in even my username and password, I take that option every time and I know that in this way, I relate a lot to the end-user.

Why Bother Validating on the Frontend?

One of the first things I heard while starting out in Software Development was not to trust the data coming from the Frontend. Malicious users can bypass all the validation done by Javascript on the Frontend, The user can turn the Javascript off on their device etcetera. So, why bother if the Backend is going to validate every single field as if you hadn’t already done so? The answer to that is User Experience.

The average app user only cares that he submitted his form and after loading for what felt like an hour, you tell him that his email format is not correct? He doesn’t care about all your inner dialogues and considerations. He only cares about himself and he knows that he does not want to spend all day trying to work your site.

You want to make sure that the user is using your application exactly as intended or close to what you intended.

How to Know What to Validate?

1. Is it Required?
2. Does it have a format?

Such a Thing as Over-validation?

As insane as it sounds, it is actually possible to over-validate and this still ends up frustrating the end-user and while my example shows an over validation possibly from the back-end, there are ways we can over validate on the Frontend too. For example, I read a story online some time ago about how the user in question kept getting a form error and he couldn’t really figure out what the issue was. It turned out that he had put an extra space at the end of a particular input. Dude! You don’t need validation for that. You can easily trim it off and the user shouldn’t have to know about that guffaw.

Another popular example is when a user inputs his date in a different format than you expect, You can easily get the date format in the way you want. Remember that users are like babies, you have to pick up after them.

Tips for Validating Forms

When validating your forms, like I already mentioned;

1. Try not to Over-validate
2. Leave hints explaining what type of input you require if it’s not immediately obvious to a five-year-old
3. Always specify your mandatory fields

Libraries you can use for form validation

While I think that every form is unique and validation libraries can come with a lot more than you bargained for, they can also help get the job done quickly. These are some of the validation libraries that you can use

1. LiveValidation
2. Formik
3. Validatejs
4. Veulidate

How to Track Form Validations

Feedback is everything. You want to know how visitors to your site interact with your site, the errors they get and how often they have to fill a particular input and if they leave your site at a particular point while filling a form, you will know!

Lucky Orange even takes this up a notch and shows you live recordings of a user interacting with your site.

Tools like these help you make informed decisions on how best to improve your forms to increase conversion and engagements.

1. Zuko
2. Clicktale
3. Lucky Orange
4. Hotjar

When Form Validation Fails, All your user wants to know is

1. What was the problem?
2. Why did it happen? — Read (Is it my fault or your fault?)
3. How do I solve it?

When validation fails, the feedback the user gets needs to be able to answer at least two of these questions, otherwise, you have failed to handle the error.

Error Handling Don’ts

1. Don’t make a user feel confused or stupid
2. Don’t blame the user
3. Don’t redirect the user to another page with feedback when an error occurs
4. Don’t summarize error messages
5. Don’t over-communicate

Error Handling Do’s

1. Position the error message such that context is not lost
2. Use the correct combination of buttons
3. Make message concise, positive, calm and straightforward
4. Keep that caps lock off!
5. Remember that the user is always right! Even when they are wrong

In case you missed the event, you can view the slides here and you can watch the recorded event here.