August 01 2018

Vue.js + VeeValidate - Form Validation Example

This is a quick example of how to setup form validation in Vue.js with the VeeValidate library. The example is a simple registration form with pretty standard fields for first name, last name, email and password. All fields are required, plus the email field must be a valid email address and the password field must have a min length of 6.

I've setup the form to validate on submit rather than as soon as each field is changed, this is implemented with a submitted field in the app component that is set to true when the form is submitted for the first time.

Styling of the example is all done with Bootstrap 4 CSS.

Here it is in action: (See on CodeSandbox at https://codesandbox.io/s/nnqnonwn9p)


Vue.js Form Validation App Component

The app component template contains all the html markup for displaying the example registration form in your browser. The form input fields use the v-model attribute to bind to properties of the user object in the app component data. Validation is implemented using the v-validate attribute from the VeeValidate library, it supports a bunch of validators out of the box including required, minlength and email.

The form binds the submit event to the handleSubmit(e) method in the app component using the Vue event binding @submit.prevent="handleSubmit", .prevent prevents the default browser form submit behaviour (equivalent of putting e.preventDefault() in the handleSubmit method).

Validation messages are displayed only after the user attempts to submit the form for the first time, this is controlled with the submitted data property of the app component.

<template>
  <div class="jumbotron">
      <div class="container">
          <div class="row">
              <div class="col-sm-8 offset-sm-2">
                  <div>
                      <h2>Vue.js Form Validation</h2>
                      <form @submit.prevent="handleSubmit">
                          <div class="form-group">
                              <label for="firstName">First Name</label>
                              <input type="text" v-model="user.firstName" v-validate="'required'" name="firstName" class="form-control" :class="{ 'is-invalid': submitted && errors.has('firstName') }" />
                              <div v-if="submitted && errors.has('firstName')" class="invalid-feedback">{{ errors.first('firstName') }}</div>
                          </div>
                          <div class="form-group">
                              <label for="lastName">Last Name</label>
                              <input type="text" v-model="user.lastName" v-validate="'required'" name="lastName" class="form-control" :class="{ 'is-invalid': submitted && errors.has('lastName') }" />
                              <div v-if="submitted && errors.has('lastName')" class="invalid-feedback">{{ errors.first('lastName') }}</div>
                          </div>
                          <div class="form-group">
                              <label for="email">Email</label>
                              <input type="email" v-model="user.email" v-validate="'required|email'" name="email" class="form-control" :class="{ 'is-invalid': submitted && errors.has('email') }" />
                              <div v-if="submitted && errors.has('email')" class="invalid-feedback">{{ errors.first('email') }}</div>
                          </div>
                          <div class="form-group">
                              <label htmlFor="password">Password</label>
                              <input type="password" v-model="user.password" v-validate="{ required: true, min: 6 }" name="password" class="form-control" :class="{ 'is-invalid': submitted && errors.has('password') }" />
                              <div v-if="submitted && errors.has('password')" class="invalid-feedback">{{ errors.first('password') }}</div>
                          </div>
                          <div class="form-group">
                              <button class="btn btn-primary">Register</button>
                          </div>
                      </form>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: 'app',
    data () {
        return {
            user: {
                firstName: '',
                lastName: '',
                email: '',
                password: ''
            },
            submitted: false
        }
    },
    methods: {
        handleSubmit(e) {
            this.submitted = true;
            this.$validator.validate().then(valid => {
                if (valid) {
                    alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.user))
                }
            });
        }
    }
};
</script>


Vue.js Form Validation Base Vue Instance

There isn't much going on in the base Vue instance other than the standard stuff. Validation is configured on the Vue instance by importing VeeValidate and calling Vue.use(VeeValidate);.

The options passed to the Vue instance tell it to render the App component inside the #app html element.

import Vue from "vue";
import VeeValidate from "vee-validate";

import App from "./app/App";

Vue.use(VeeValidate);

new Vue({
  el: "#app",
  render: h => h(App)
});

 

Web Development Sydney

Feel free to contact me if you're looking for a web developer in Sydney, I also provide remote contracting services for clients outside Sydney.

 


Sponsored by