Vue Academy · Lesson

Manual Validation Patterns

Reactive error objects, validation on blur vs submit, password confirmation matching.

Lesson 3 of 413 steps

Manual Validation Patterns is a free Vue Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

Validating Without a Library

For simple forms you can validate by hand using reactive state. You track errors, run checks on submit or on blur, and show messages with directives. This teaches the fundamentals every library builds on.

An Errors Object

Keep a reactive errors object keyed by field name. An empty string (or missing key) means no error.

<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
const errors = reactive({ name: '', email: '' })
</script>

A validate Function

Write a validate function that checks each field and sets messages on the errors object. Return whether the form is valid.

<script setup>
function validate() {
  errors.name = form.name ? '' : 'Name is required'
  errors.email = form.email.includes('@') ? '' : 'Invalid email'
  return !errors.name && !errors.email
}
</script>

Validating on Submit

Call validate at the start of your submit handler and bail out if it fails. This guarantees no invalid data is sent.

<script setup>
function onSubmit() {
  if (!validate()) return
  // proceed to send
}
</script>

Per-Field Validation on Blur

Validating only on submit can feel slow. Validate a single field when the user leaves it using @blur for instant feedback.

<script setup>
function validateName() {
  errors.name = form.name ? '' : 'Name is required'
}
</script>

<template>
  <input v-model="form.name" @blur="validateName" />
</template>

Showing Error Messages

Use v-if to display a message only when that field has an error. Place it near the input.

<template>
  <input v-model="form.name" @blur="validateName" />
  <span v-if="errors.name" class="msg">{{ errors.name }}</span>
</template>

Styling Invalid Fields

Bind a class with the object syntax to add a red border when an error exists. The class applies only while errors.name is truthy.

<input
  v-model="form.name"
  :class="{ error: errors.name }"
  @blur="validateName"
/>

The error Style

A small CSS rule completes the look — a red border signals the field needs attention.

<style>
.error { border: 1px solid red; }
.msg { color: red; font-size: 12px; }
</style>

Computed Validity

Derive an overall validity flag with computed to enable or disable the submit button reactively.

<script setup>
import { computed } from 'vue'
const isValid = computed(() => !errors.name && !errors.email)
</script>

<template>
  <button :disabled="!isValid">Submit</button>
</template>

Strengths and Limits

Manual validation is transparent and dependency-free, ideal for small forms. But as rules grow — cross-field checks, async validation, many fields — the boilerplate adds up, which is why libraries exist.

Validation Flow Summary

The pattern is: reactive errors, a validate function, run it on submit (and optionally on blur), show messages with v-if, and style with a conditional class.

Quick Check

Test your manual validation knowledge.

Answer it in the interactive lesson

Recap

Manual validation patterns:

Keep a reactive errors object keyed by field.
A validate function sets messages and returns validity.
Validate on submit, and per-field on @blur for fast feedback.
Show messages with v-if="errors.x" and style with :class="{ error: errors.x }".

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

Is the “Manual Validation Patterns” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “Manual Validation Patterns”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

What will I learn in “Manual Validation Patterns”?

Reactive error objects, validation on blur vs submit, password confirmation matching. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

How long does the “Manual Validation Patterns” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy