They say that most web apps are just HTML forms. Well, forms need validation and thankfully, HTML5 comes with many great in-built form validation capabilities for things like email, numbers, max, min, etc. You can even write your own validation rules with patterns. In this article, I will talk about how you can leverage HTML5 validation while overriding the boring defaults, so you can display validation errors as fancy as you like. I will be working with Vuejs but you can always follow along even if you don’t use Vue.

Let’s start with a modified version of the Checkout form from bootstrap examples so we don’t have to worry too much about styling. You can clone the starter here. The setup should look something like this:

HTML Validation with Vuejs Starter

The default HTML5 validation doesn’t show all the form errors at once. The irony though is that the browser actually knows all the invalid fields once a user submits, so now all we have to do is check for them and then display however we like.

Let’s now add an id to our form and a listener that captures the submit event using Vuejs.

Add Event Listener To Form Submission

Then in our form-validation.js file, we will initialize Vuejs and create methods to handle the form submission and validation.

Here we created 2 methods submitForm and validateForm. submitForm calls validateForm which should return true if all the validation rules are met. For now, we just console log all the invalid form inputs. If we then inspect each one we can find a number of interesting properties including the validationMessage which we can display to our users.