veevalidate-form-validator

VeeValidate + Zod Form Validator

Activation Triggers

This skill activates when:

• Creating form components
• Mentioning "form", "validation", "input"
• Writing <form> or v-model
• Handling user input

Required Pattern

<script setup lang="ts">
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { z } from 'zod'

// Define schema with Zod
const schema = toTypedSchema(
  z.object({
    email: z.string().email('Invalid email'),
    password: z.string().min(8, 'Password too short'),
  })
)

// Create form with VeeValidate
const { handleSubmit, errors, defineField } = useForm({
  validationSchema: schema,
})

// Define reactive fields
const [email, emailAttrs] = defineField('email')
const [password, passwordAttrs] = defineField('password')

// Type-safe submit handler
const onSubmit = handleSubmit((values) => {
  // values is typed: { email: string, password: string }
  console.log(values.email, values.password)
})
</script>

<template>
  <form @submit="onSubmit">
    <div>
      <label for="email">Email</label>
      <input
        id="email"
        v-model="email"
        v-bind="emailAttrs"
        type="email"
        aria-describedby="email-error"
      />
      <span v-if="errors.email" id="email-error" class="error" role="alert">
        {{ errors.email }}
      </span>
    </div>

    <div>
      <label for="password">Password</label>
      <input
        id="password"
        v-model="password"
        v-bind="passwordAttrs"
        type="password"
        aria-describedby="password-error"
      />
      <span v-if="errors.password" id="password-error" class="error" role="alert">
        {{ errors.password }}
      </span>
    </div>

    <button type="submit">Submit</button>
  </form>
</template>

Forbidden Patterns

<!-- WRONG: No validation -->
<input v-model="email" />
<button @click="submit">Submit</button>

<!-- WRONG: Manual validation -->
<input v-model="email" @blur="validateEmail" />

<!-- WRONG: Template-only validation -->
<input v-model="email" :class="{ error: !isValidEmail }" />