【Vue.js】入力フォームのバリデーション機能を実装する方法｜リアルタイムでエラー表示

<script setup>
import { ref, reactive, computed } from 'vue'

const form = reactive({ name: '', email: '' })
const touched = reactive({ name: false, email: false })   // 触れたあと、フォーカスが外れた項目
const submitted = ref(false)                              // 送信を試みたか

// 項目ごとの検証ルール：エラーメッセージを返す（問題なければ空文字）
const rules = {
  name: (v) => {
    const value = v.trim()
    if (value === '') return '名前は必須です。'
    if (value.length < 2) return '2文字以上で入力してください。'
    return ''
  },
  email: (v) => {
    const value = v.trim()
    if (value === '') return 'メールアドレスは必須です。'
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return '正しいメール形式で入力してください。'
    return ''
  }
}

// エラーは、常にリアルタイムで算出しておく
const errors = computed(() => ({
  name: rules.name(form.name),
  email: rules.email(form.email)
}))
const hasError = computed(() => Object.values(errors.value).some(Boolean))

// 画面に出すのは、「触れたあと」か「送信を試みたあと」だけ
function visibleError(key) {
  return touched[key] || submitted.value ? errors.value[key] : ''
}

function handleSubmit() {
  submitted.value = true

  if (hasError.value) {
    // 最初のエラー項目にフォーカスを移す
    const firstKey = Object.keys(errors.value).find((key) => errors.value[key])
    document.getElementById(firstKey)?.focus()
    return
  }

  // ここで送信する（サーバー側でも、必ず検証し直す）
  console.log('送信する値：', { ...form })
}
</script>

<template>
  <!-- novalidate：ブラウザ標準の検証を止め、エラー表示を自前に統一する -->
  <form novalidate @submit.prevent="handleSubmit">
    <div class="field">
      <label for="name">名前</label>
      <input
        id="name"
        v-model="form.name"
        type="text"
        autocomplete="name"
        :aria-invalid="visibleError('name') !== ''"
        aria-describedby="name-error"
        @blur="touched.name = true"
      >
      <p id="name-error" class="error" role="alert">{{ visibleError('name') }}</p>
    </div>

    <div class="field">
      <label for="email">メールアドレス</label>
      <input
        id="email"
        v-model="form.email"
        type="email"
        autocomplete="email"
        :aria-invalid="visibleError('email') !== ''"
        aria-describedby="email-error"
        @blur="touched.email = true"
      >
      <p id="email-error" class="error" role="alert">{{ visibleError('email') }}</p>
    </div>

    <!-- ボタンは無効にしない。押したときに、エラーを示す -->
    <button type="submit">送信</button>
  </form>
</template>

<style scoped>
.field { margin-bottom: 1em; }
label, input { display: block; }
.error { margin: 0.25em 0 0; color: #c62828; font-size: 0.9em; }
input[aria-invalid="true"] { border-color: #c62828; }
</style>

import { ref, watch } from 'vue'

const emailTaken = ref(false)   // すでに登録されているか
const checking = ref(false)
let timer

// 入力のたびに通信しないよう、少し待ってから確認する（デバウンス）
watch(
  () => form.email,
  (value) => {
    clearTimeout(timer)
    emailTaken.value = false

    // 形式が正しくないうちは、確認しない
    if (!value || errors.value.email) return

    timer = setTimeout(async () => {
      checking.value = true
      try {
        const res = await fetch(`/api/email-exists?email=${encodeURIComponent(value)}`)
        emailTaken.value = (await res.json()).exists
      } finally {
        checking.value = false
      }
    }, 500)
  }
)