Validating form input

Posted by / 11-Jun-2020 02:04

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.

validating form input-90validating form input-52validating form input-29

Validators are simple functions (or callables) that take a single argument and raise The previous sections explained how validation works in general for forms.

One thought on “validating form input”