Vue Academy · Lesson

Manual Validation Patterns

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

Manual Validation Patterns is a free Vue Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

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 }".

Frequently asked questions

Is the “Manual Validation Patterns” lesson free?

Yes — the full text of “Manual Validation Patterns” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

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