Form Validation Made Easy

In this article, I would like to discuss what options do we have as frontend devs to implement forms on the web.

Most web applications have forms to communicate data between customers and businesses. Forms are not only essential for your web application to function properly but also they have a massive effect on the UX and often times are make it or break it for the customers.

Frontend developers are always challenged by fancy designs, with complex validation rules while preserving a nice user experience.

hint: Constrain Validation API 😎

Built in HTML5 Validation

Most of you are aware of the basic HTML5 validation that rely on the validation related attributes. Unfortunately, it has some downsides that in most cases result to a no-go.

* Default error messages localised in the browser locale
* Styling is not straight forward
* No Custom Validation support for example zip code

Third Party libraries

To overcome the perviously mentioned limitations with HTML5 validation, developers often tend to rely on Javascript libraries to address these issues.

There are so many popular libraries that support integration with your framework of choice such as jqueryvalidation, vee-validate , formik, angular-form-validation.

In my opinion sometimes tweaking the code to integrate with the library prompt lots of overhead and the libraries are not always sufficient to implement all of your requirements.

This is an amazing article written by Chris Coyler that I recommend you to read on Why Use a Third-Party Form Validation Library?

Constrain Validation API ✅

The super effective and clean API blew my mind last year when I was introduced to this by my friend Uche.

I am not going to go through explaining how it works as Chris Ferdinandi did already a better job with his form validation series, yet I want to highlight the some of benefits.

Simplicity

In a nutshell, the API provides you with Properties, Methods and Events to give you great control that enables you to implement all of the business requirements.

ValidityState represents the validity states that an element can be in, with respect to constraint validation. Together, they help explain why an element’s value fails to validate, if it’s not valid

invalid this event type is fired at a form control element if the element does not satisfy its constraints.

By levering checkValidity() on blur/change, an invalid event might be raised which can be caught and then handled according to your needs.

One other possibility is to use the setCustomValidity() method to set custom validation errors. If you want to dig deep the docs at Mozilla is a great start.

Framework and Browser Compatibility

It comes with a decent support matrix since it natively supported, it is inapplicable to which framework you are using be it Angularjs, jquery, Vue2. It just works seamlessly.

Shallow Learning Curve

Opposite to third party libraries were new developers joining the team need to learn how to use the plugin. The constrain validation API is documented on Mozilla and is very easy to understand.

Bundle Size

Since it’s part of the web API, no dependencies are required and therefore you can ship less kilobytes to customers.

Limitations

Unfortunately, one of the problems I have faced is the lack of support for many errors at the same time. Although, you can work around this, it’s a bit unpleasant that you cannot provide an array and instead you are left with a string.

Use Cases

Forms that rely on Web Components

I recently was working on a Nuxt application that renders input components written Stenciljs and need to execute custom validation rules provided by a rest endpoint and custom localised error messages.

In this situation, using a third party library would require us to write lots of code to integrate with vee-validate. Instead we built a very straight forward vue directive that leverage the powers of the Constrain Validation API.

Legacy System

Another situation was when I was working on a Vue 1 Application and the validation library got deprecated as it was no longer supported, we couldn’t find any libraries that are compatible for Vue 1 and therefore we used the Constrain Validation API.

TL;DR

With the ever growing powers of the web api, it is becoming easier and easier to implement functionality without relying on third party libraries. The Constrain Validation API gives you greater control and works out of the box with no dependencies.

Thanks for reading! if you have enjoyed this article you might also like these 🤓🤓

Using Stenciljs with Vue.

Does this data go to Vuex or Vue local State?