Mercedes Scenna

Form validation is key to every website, so be an ecommerce or cms. Forms are the elements where users interact and provide their information. And validations ensure that the users provide all required information and in the right format. Web forms are becoming more and more important for the success of a company. In the end, exactly those web-forms will be key for the first contact with users and potential customers.
We can read a lot of articles of how validations are best implemented, what to do, what not to do. In the case of our odoo websites, we can take advantage of the bootstrap error messages. What options do we have for formatting, validation and how to take advantage of bootstrap to have User Friendly error and warning messages.

Conceptually, best practices for form validations are:

  • Use good information in the labels and descriptions to avoid errors. Give examples or useful placeholders. 

  • Format the information the user gives in the fields, whether it is a phone or credit card number, a date, etc.

  • Avoid generic messages that give no information whatsoever to the user of what might be wrong.

  • Fields containing errors should be highlighted in some way, like a red border o a red background.

  • Use messages that adapt according to the error on the field and can inform exactly what should be corrected.

  • Unless the field is absolutely necessary, use warnings instead of error messages. Dont block the user from moving forward.

  • You can use a combination of Server-side and Client-side validation. Client-side (also known as live validation) should always work on focus-out. Showing errors while the user is still typing can be very confusing.

  • If the form is submitted and there are errors on the page, the information given should not be lost.

  • In relation to the previous one, use warning instead of error messages. Alert potential problems. Inputs that tend to follow a certain pattern yet can vary slightly, a validation cannot be so strict but you still want the user to recheck the information given. In this case we use a warning. For example: a user types in an email that contains a special symbol. It is possible, although it is not very likely that people use them. So you show a warning saying, does your email contain special characters? Same with phone numbers, addresses and other inputs.

Useful libraries for Server and Client- side validation:


And as extra, a good blogpost comparing different javascript libraries (this ones and some other more) Javascript libraries for web form validation

Odoo image and text block
Odoo image and text block
Odoo image and text block
Odoo image and text block
Odoo image and text block

About Mercedes Scenna

The sassy frontend skilled/ She does not only coding but also conceptualizing and drawing/ Traveling and photography is her passion.