Vue.js Form Validation

Form validation checks that visitors enter correct information before the form is sent. An email field needs an @ sign, a password needs a minimum length, and a required field cannot stay empty. Clear checks save visitors from frustration and protect your server from bad data. Vue makes validation simple, because form values already live in reactive data and computed properties can judge them instantly.

Think of an airport check-in desk. The agent verifies a passport before issuing a boarding pass. Catching a problem at the desk costs less than discovering it at the gate. Validation catches problems at the form.

Start with Basic Checks

Store each field in data, define an errors object, and run a check when the form is submitted.

<div id="app">
  <form @submit.prevent="submitForm">
    <input v-model="email" placeholder="Email">
    <p v-if="errors.email">{{ errors.email }}</p>

    <input v-model="password" type="password" placeholder="Password">
    <p v-if="errors.password">{{ errors.password }}</p>

    <button type="submit">Register</button>
  </form>
</div>

<script>
  Vue.createApp({
    data() {
      return { email: "", password: "", errors: {} };
    },
    methods: {
      validate() {
        this.errors = {};
        if (!this.email.includes("@")) {
          this.errors.email = "Enter a valid email address.";
        }
        if (this.password.length < 8) {
          this.errors.password = "Use at least 8 characters.";
        }
        return Object.keys(this.errors).length === 0;
      },
      submitForm() {
        if (this.validate()) {
          alert("Form sent");
        }
      }
    }
  }).mount("#app");
</script>

The .prevent modifier stops the browser from reloading the page. The validate method fills the errors object, and each message appears under its own field.

Diagram: Submit Flow

Click Register
   |
validate()
   |-- errors found   --> messages appear, form is not sent
   |-- no errors      --> form is sent

Validate as the Visitor Types

Computed properties check values continuously. Messages react to every keystroke, which gives instant feedback.

computed: {
  emailError() {
    if (this.email === "") return "";
    return this.email.includes("@") ? "" : "Enter a valid email address.";
  },
  passwordStrength() {
    if (this.password.length >= 12) return "Strong";
    if (this.password.length >= 8)  return "Medium";
    return "Weak";
  },
  formValid() {
    return this.email.includes("@") && this.password.length >= 8;
  }
}

<button :disabled="!formValid">Register</button>

Diagram: Password Meter

5 characters   --> Weak
9 characters   --> Medium
14 characters  --> Strong

Show Errors After the Visitor Leaves a Field

Error messages that appear while someone is still typing feel aggressive. Track which fields the visitor has touched, and show errors for those fields only. The blur event fires when focus leaves an input.

<input v-model="email" @blur="touched.email = true">
<p v-if="touched.email && emailError">{{ emailError }}</p>

data() {
  return { touched: { email: false } };
}

Use Built-In Browser Rules

HTML attributes such as required, minlength, type="email", and pattern provide free checks and correct keyboards on phones. Combine them with Vue messages for a polished result.

<input type="email" required v-model="email">
<input type="password" minlength="8" required v-model="password">

Write Reusable Rules

Small functions describe each rule, and a list of rules per field keeps large forms organized.

const required = (v) => (v ? "" : "This field is required.");
const minLength = (n) => (v) =>
  v.length >= n ? "" : "Use at least " + n + " characters.";

function check(value, rules) {
  for (const rule of rules) {
    const message = rule(value);
    if (message) return message;
  }
  return "";
}

const passwordError = check(password, [required, minLength(8)]);

Diagram: Rule Chain

value --> required?  --fail--> "This field is required."
         |
         pass
         v
       minLength(8)? --fail--> "Use at least 8 characters."
         |
         pass --> no error

Consider a Validation Library

Large forms with many rules benefit from libraries such as VeeValidate, Vuelidate, or FormKit. They offer ready-made rules, schema support, and error tracking. Learn the manual approach first, because it explains what every library does underneath.

Validation Best Practices

• Write messages that explain how to fix the problem.
• Place each message next to its field.
• Keep labels visible. Placeholders disappear when typing starts.
• Mark errors with text as well as color, so everyone can read them.
• Repeat every check on the server. Browser checks improve the experience and cannot guarantee safety.

Summary

Vue form validation relies on reactive data and computed properties. An errors object collects messages on submit, computed values give live feedback, and a touched flag delays messages until a visitor leaves a field. Small rule functions keep logic reusable, and libraries scale the pattern to large forms. Server-side checks remain essential for real security.