Manual Validation Patterns
Reactive error objects, validation on blur vs submit, password confirmation matching.
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>All lessons in this course
- v-model on All Form Elements
- Form Submission and Reset
- Manual Validation Patterns
- VeeValidate for Schema-Based Validation