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 Vuejsbut 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:
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.
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.
Next, let’s create the data properties that will hold the validationErrors for each of the invalid inputs. Then we will loop through the array of invalid inputs to set each one.
Here we have done a number of things. We created the validationErrors data property to hold the error messages for each field. Each property of the validationErrors object corresponds to the name attribute of each form element being validated. So in the validateForm method, we clear out any previous error messages and then loop through the invalid fields to set their corresponding validationErrors. We also added an event listener that re-validates once the invalid field has changed.
Now we need to add name attributes to each field we want to validate, which is quite normal when making forms. Then, of course, we should also add the span elements that will display our error messages to the user.
Now once we submit the form our users can see all the validation errors they need to fix. What’s cool is that we have done it without having to bring in an extra library just for validation. Now because we’re leveraging Vue’s data binding powers we can really get creative from here on how we want our errors to be displayed.
Working with HTML5 Patterns
What if we need to extend beyond the available validation rules. For example, checking if a zip code is valid. This is where HTML5 patterns get super useful because we can write regular expressions right in our HTML to perform any kind of checks we need. I feel like someone is swearing at regular expressions right now but thankfully you can find a tonne of useful regexes on html5pattern.com. Right now I haven’t found one for Nigerian zip codes but I know I will.
Ok, finding a regex was a bit harder than I thought. Turns out they are mostly 7 digit numbers. So [0–9]{13,16} should work fine. Now we have a new problem. The error messages on HTML5 patterns are not very helpful so we need to specify our own. We need a way to tell the validateForm function what message to display.
We can then check for the title attribute in the validateForm method:
Here we added an if-else block that checks for the title attribute and just displays the default error message if it is not found. Also, the formId and errorObjectName variables are now being passed into the validateForm function, this allows us to validate several forms on the same web page how and whenever we choose to.
We have been able to create a simple convention over configuration method for form validation. Once we specify the name attributes of our form fields in the validationErrors object our cool validateForm function does the rest by leveraging built-in HTML5 features and all we need to do is display the errors how we want to. As always I hope this helps someone.
You can use this code snippetto get validation started quickly if you are using Vue and it shouldn’t be that hard to apply to other front-end frameworks as well. You can also find the working code for this article at this repoand the demo website here. Cheers!