🖥

Nuxt3 / Vue3 + vee-validate4 – バリデーションチェックをして不正であれば submitさせない

2023/09/01に公開

コード例

  • useField で meta / value / errorMessage などを定義できるので、それを利用する
  • submitの時に valid でなければ処理を実行せず戻るようにしておく

<template>
  <form @submit="submit">
    <p>Name <input v-model="nameValue" type="text" /></p>
    <p>Email<input v-model="emailValue" type="text" /></p>

    <button>Submit</button>
    <p v-if="errorMessageName">{{ errorMessageName }}</p>
    <p v-if="errorMessageEmail">{{ errorMessageEmail }}</p>
</form>
</template>

<script setup>
import { useField } from 'vee-validate';

const { meta: nameValidateMeta, value: nameValue, errorMessage: errorMessageName } = useField("name", "required");
const { meta: emailValidateMeta, value: emailValue, errorMessage: errorMessageEmail } = useField("email", "required|email");

function submit(event) {
  event.preventDefault();

  console.log("validate check");

  if(!nameValidateMeta.valid) {
    console.log("name is invalid")
    return;
  }
  if(!emailValidateMeta.valid) {
    console.log("email is invalid")
    return;
  }

  console.log("submit");
  console.log(nameValue.value)
  console.log(emailValue.value)
}
</script>

動作例

<img width="586" alt="image" src="https://user-images.githubusercontent.com/13635059/212309217-f1470e25-e2e9-49b0-b50d-fffd5077fc0b.png">

参考

https://vee-validate.logaretm.com/v4/guide/composition-api/validation/

環境

nuxt 3.0.0

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-01-13

Discussion