Mastering Form Validation in Vue: A Step-by-Step Guide

Getting Started

To follow along, you’ll need Node.js ≥v10.x installed, as well as a code editor like VS Code, Vue installed globally on your machine, and Vue CLI 3.0 installed. Download a Vue starter project or clone it using Git, then navigate into the unzipped file or cloned project and run the command to keep all dependencies up to date.

Understanding Watchers in Vue

Vue’s watch option is a game-changer for responding to data changes in a given element. It’s also an excellent tool for conducting form validation. With watch, you can trigger JavaScript functions to validate user input in real-time.

Building Our Form

Let’s create a form for creating a new account, complete with fields for email and password. Open the project in your IDE, go into the component folder, and replace the content of your Test.vue file with the code block below:

<template>
  <form>
    <label>Email</label>
    <input type="email" v-model="email">
    <br>
    <label>Password</label>
    <input type="password" v-model="password">
    <br>
    <button :disabled="!isValid">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
      isValid: false
    }
  }
}
</script>

Email Validation

We’ll use the watch option to trigger a function that checks for a valid email address.

watch: {
  email(value) {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    this.isValid = emailRegex.test(value);
  }
}

Password Validation

Next, we’ll validate that the password is at least eight characters long. If it contains fewer than eight characters, we’ll prompt the user to make it longer.

watch: {
  password(value) {
    this.isValid = value.length >= 8;
  }
}

Adding a Submit Button

Now, let’s add a submit button! Our button will be disabled if the email and password are not validated. We’ll update our validation functions to update the disabled array if validations are or aren’t met.

watch: {
  email(value) {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    this.isValid = emailRegex.test(value) && this.password.length >= 8;
  },
  password(value) {
    this.isValid = value.length >= 8 && this.emailRegex.test(this.email);
  }
}

Putting it All Together

With our form validation in place, we can now track user input and ensure that only valid information is submitted. By using the watch option, we’ve created a robust and user-friendly form that provides real-time feedback to users.

<template>
  <form>
    <label>Email</label>
    <input type="email" v-model="email">
    <br>
    <label>Password</label>
    <input type="password" v-model="password">
    <br>
    <button :disabled="!isValid">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
      isValid: false
    }
  },
  watch: {
    email(value) {
      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      this.isValid = emailRegex.test(value) && this.password.length >= 8;
    },
    password(value) {
      this.isValid = value.length >= 8 && this.emailRegex.test(this.email);
    }
  }
}
</script>