Validating form input
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. 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.
The advantage to this approach is that the user does not have to wait for the data to be submitted to your application, validated and returned.
The disadvantage is that client-side scripting is optional on browsers and sometimes poorly supported.
Once we specify the name attributes of our form fields in the validation Errors object our cool validate Form function does the rest by leveraging built-in HTML5 features and all we need to do is display the errors how we want to. You can use this code snippet to 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.
So you also need to remember to allow for the fact that the fields you are wanting to validate might not have survived the initial individual field checks.
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.
Also, the form Id and error Object Name variables are now being passed into the validate Form 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.
Validators are simple functions (or callables) that take a single argument and raise The previous sections explained how validation works in general for forms.