Vue.js Forms and Validation

Vue Forms

Forms are an aspect of applications, and Vue.js provides features to simplify the process of building forms, handling user input, and ensuring data accuracy. In this section, we explore how to create forms with Vue.js and apply validation methods using both its functions and third party libraries.

Building Forms with Vue.js

Creating a Basic Form

Vue.js makes it straightforward to create forms. Here’s a simple example of a login form:

<template>`
  <form @submit.prevent="login">
    <label for="username">Username:</label>
    <input type="text" id="username" v-model="formData.username" required>
    <label for="password">Password:</label>
    <input type="password" id="password" v-model="formData.password" required>
    <button type="submit">Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    }
  }
  methods: {
    login() {
      console.log(this.formData);
    }
  }
}
</script>

In this example, we show how to use the `v-model` directive to connect input fields with the component data, enabling smooth two way data binding. The `@submit.prevent` function stops the regular form submission process and calls the “login” method when the form is submitted.

Form Validation Techniques

Built-in Validation

Vue.js provides ways to validate forms. You can check if fields are completed, follow specific patterns, or meet length requirements. This can be done through directives such as v-model and v-bind.

For example, to validate an email field, you can use this code:

<input type="email" id="email" v-model="formData.email" required>

Leveraging Third-Party Libraries

To handle validations, you can incorporate libraries such as Vuelidate or VeeValidate into your Vue.js applications. These libraries offer a set of rules for validating forms and features for showcasing error messages, improving the efficiency of your validation workflow.

Here’s how you can use Vuelidate to validate a form field:

Vuelidate:

npm i vuelidate

if you are using yarn

yarn add vuelidate

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

<template>
  <form @submit.prevent="login">
    <label for="username">Username:</label>
    <input type="text" id="username" v-model="formData.username" required>
    <label for="password">Password:</label>
    <input type="password" id="password" v-model="formData.password" required>
    <button type="submit">Login</button>
  </form>
</template>

<script>
import { required, email, minLength } from 'vuelidate/lib/validators';
export default {
  data() {
    return {
      formData: {
        email: ''
      }
    }
  },
  validations: {
    formData: {
      email: {
        required,
        email,
      },
       password: {
        required,
        minLength: minLength(6)
      }
    }
  },
  methods: {
    login() {
      // Handle form submission
      console.log(this.formData);
    }
  }
}
</script>

By using Vuelidate, you can easily define validation rules and display error messages in your forms.

VeeValidate:

npm i vee-validate@3

if you are using yarn

yarn add vee-validate@3

import Vue from 'vue';
import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';

Extend the rules

extend('email',
 {
...email,
  message: 'Enter a valid email.'
});

extend('required', {
  ...required,
  message: 'This field is required.
});

Register it globally
Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider);

<template>
  <ValidationObserver ref="form">
  <form @submit.prevent="login">
    <ValidationProvider ref="provider" v-slot="{ errors }" rules="email|required">
      <label for="username">Email:</label>
      <input type="text" id="email" v-model="formData.email">
      <span>{{errors[0]}}</span>
     </ValidationProvider>

      <ValidationProvider ref="provider" v-slot="{ errors }" rules="required">
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="formData.password">
        <span>{{errors[0]}}</span>
      </ValidationProvider>
    <button type="submit">Login</button>
  </form>
</ValidationObserver>
</template>

<script>

export default {
  data() {
    return {
      formData: {
        email: '',
        password: ''
      },
    };
  },
  methods: {
    login() {
     const valid = this.$refs.form.validate()
      if(valid){
       console.log(this.formData);      
      }
    }
  }
}
</script>

By using VeeValidate, you can simplify the validation process and make it cleaner.

Practical Form Validation

In the next session, we’ll delve into real-world scenarios and tips for implementing form validation using Vue.js’ native features and external libraries. You’ll discover how to validate various input fields, show error messages, and ensure a seamless user journey.