Vee-validate(Intro and Example)

If you are making Web Application you probably need some valildation. Form validation is the one of the most important thopic.

You can make server-side validation, client-side validation. But here I am going to discuss little bit about client-side validation for vue.js.

I would like to choose vee-validate though there are couple of plugins available.

Go to your project folder and install vee-validate locally.

npm install vee-validate --save

Then you need to register your vee-validate in your main.js file.

// main.js
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)

Our installation process is done. Let’s see some of the example of vee-validate.

In your App.vue file add an input field for name. I make v-validate as a directive, this is required to tell the DOM what kind of validation we are going to use for this input field. We use required and alpha inside v-validate directive, separated by ‘|’, if you don’t put anything on this input field it will show an error immediately this is for the required you wrote in the v-validate and as you wrote alpha you can’t put anything except (A-Z)(a-z).

If any of the error is true the span tag will show an error message, it can be for required or for alpha.

// App.vue
<div>
<input type="text" placeholder="Name" name="name" v-model="name" v-validate="'required|alpha'">
    <span v-if="errors.has('name')">
        {{ errors.first('name') }}
    </span>
</div>

You can do same for the email. Just replace name with email.

Now pattern, if you want an input field that can take more than or equal four digits, you can set a regular expression inside v-validate directive, don’t forget to start with ‘/.’ and closed by ‘/’.

// App.vue 
<div>
    <input type="text" placeholder="Price" name="price" v-model="price" v-validate="{ rules: { regex:  /.[0-9]{3,}$/} }">
    <span v-show="errors.has('price')">
        *atleast 4 digits amount
    </span>
</div>

For Date, you can make an input field that can take date only. It’s simple you just need to format your date inside v-validate directive.

// App.vue
<div>
    <input type="text" placeholder="Date" name="date" v-model="date" v-validate="'required|date_format:DD-MM-YYYY'">
    <span v-if="errors.has('date')">
        {{ errors.first('date') }}
    </span>
</div>

You can also hide your submit button if any error occurs.

// App.vue
<button :disabled="errors.any()" type="submit">Submit</button>

If the user click the submit button don’t even enter any input field, you can restrict him with an alert.

// App.vue
<template>
<form @submit.prevent="submitForm">
...
</form>
</template>
<script>
export default {
methods: {
        submitForm() {
            this.$validator.validateAll().then(res=>{
                if(res) {
                    alert('Form successfully submitted!')
                } else {
                    alert('Please correct all error!')
                }
            })
        }
    }

In here @submit.prevent=”submitForm” means Bind form submit action on method submitForm; prevent the default submit process.

this.$validate.validateAll() is a promise which work is to Validate all the fields and give a success/error message.

This is it. You can find more awesome validation api, please check their official documentation.

Official documentation: http://vee-validate.logaretm.com/

Github repo: https://github.com/baianat/vee-validate