Author -  Sai gowtham

Form Validation in Vue.js using VeeValidate

In this tutorial, we are going to learn about how to validate the forms in vue by using the veevalidate library.

Creating Vue App

Let’s create the new Vue app by running the following command in your terminal.

vue create vue-form-validation && cd $_

This above command will download the Vue app related files in the vue-form-validation folder and change your working current directory to vue-form-validation.

Installing VeeValidate

Let’s install the VeeValidate library by running the below command in your terminal.

npm i vee-validate

Once you successfully installed vee-validate library now open your vue-form-validation folder in your favorite code editor and we need to tell vuejs to use this vee-validate library.

main.js
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import App from './App.vue'

Vue.use(VeeValidate);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Now we can use vee-validate library anywhere form our vue app.

Validating input field

For validating input field we need to add v-validate attribute with value required

form.vue
 <template>
   <form>
   <input
        type="text"
        name="name"
        v-validate="'required'"        placeholder="Name"
        v-model="name"
      >
    </form>
 </template>

<script>
export default {
  data: function() {
    return {
      name: ""
    };
  },
};
</script>

Displaying errors

To display the errors we need to use a errors.has() method provided by the vee-validate library.

form.vue
 <template>
   <form>
   <input
        type="text"
        name="name"
        v-validate="'required'"
        placeholder="Name"
        v-model="name"
      >
      <p v-if="errors.has('name')">{{errors.first('name')}}</p>   </form>
 </template>

<script>
export default {
  data: function() {
    return {
      name: ""
    };
  },
};
</script>

In the above code, we have used errors.has('name') to check is there any errors in input name field if any error is found, we are displaying the error message with the help of errors.first method.

Let’s test it now

validating-input-field vuejs

Validating Email

To validate the email field we need to add an email value to v-validate attribute.

form.vue
 <template>
   <form>
   <input
        type="text"
        name="name"
        v-validate="'required'"
        placeholder="Name"
        v-model="name"
      >
      <p v-if="errors.has('name')">{{errors.first('name')}}</p>

      <input
        type="text"
        name="email"
        v-validate="'required|email'"        placeholder="Email"
        v-model="email"
      >
      <p v-if="errors.has('email')">{{errors.first('email')}}</p>
   </form>
 </template>

<script>
export default {
  data: function() {
    return {
      name: "",
      email:""
    };
  },
};
</script>

vuejs-validating-email

Displaying errors based on events

We can also display the error messages based on the events like change or blur event.

form.vue
 <template>
   <form>
   <input
        type="text"
        name="name"
        v-validate="'required'"
        placeholder="Name"
        v-model="name"
      >
      <p v-if="errors.has('name')">{{errors.first('name')}}</p>

      <input
        type="text"
        name="email"
        v-validate="'required|email'"
        data-vv-validate-on="blur|change"        placeholder="Email"
        v-model="email"
      >
      <p v-if="errors.has('email')">{{errors.first('email')}}</p>
   </form>
 </template>

<script>
export default {
  data: function() {
    return {
      name: "",
      email:""
    };
  },
};
</script>

Now we can only see an error message when a user stops typing and move to another field.

Submitting Form

The VeeValidate library provides us a validateAll method by using this we can check if every field is valid or not at the time of form submission.

form.vue
 <template>
  <form>
    <input type="text" name="name"
    v-validate="'required'"
    placeholder="Name"
    v-model="name"
    >
    <p v-if="errors.has('name')">{{errors.first('name')}}</p>

    <input
      type="text"
      name="email"
      v-validate="'required|email'"
      data-vv-validate-on="blur|change"
      placeholder="Email"
      v-model="email"
    >
    <p v-if="errors.has('email')">{{errors.first('email')}}</p>
    <button class="signup-btn" :disabled="errors.items.length>0"    @click.prevent="validateAll">Submit</button>  </form>
</template>

<script>
export default {
  data: function() {
    return {
      name: "",
      email: ""
    };
  },
  methods: {
    validateAll() {
      this.$validator.validateAll().then(result => {
        if (result) {
          alert("Form Submitted!");
          return;
        }
      });
    }
  }
};
</script>

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY