A Guide to Form Validation in Vue.js

A Guide to Form Validation in Vue.js

Hello everyone, this is my first tutorial in this blog and I will try to explain in the best way this topic. I will assume that you already know what VueJS is and you have taken their first steps with this framework. I will also consider that you have some experience handling the new features of ES6, (if not, you can read this post and come back later) so i will skip certain things in order to focus on the topic of this post.

[…]

We have to start with this basic HTML file with the Bootstrap 3.3.7 stylesheet, a bootswatch theme (lumen) and VueJS.

[…]

You would normally use type=”email” for the second input, but i’m leaving it as text to demonstrate the validation we get with Vue.

[…]

With the HTML code finished, now we will jump into the main.js file and start coding the logic for our form.

[…]

As i mentioned above, there are three variables that hold the value of the inputs. We can wire those up using Vue models.

[…]

Done with the Javascript code. Back in the HTML we need to do some changes. We need to fire the validatedForm() method when the form is submitted.

[…]