Q&A
vee-validateでバリデーションを実装しています。
基本的な実装はできなのですが、inputタグにカーソルがある状態でenterキーを押下するとvalidationが走ってしまったり、
validationが問題ない場合は保存されてしまいます。
保存ボタンをクリックした時のみ、バリデーションが走り、問題なければ保存処理(axios)を実行したいのですがうまくできません。
色々な方法があるかもしれませんが、アドバイスいただけますと幸いです。
■vue3
■vee-validate: 4.7.3
こちらだと、inputタグにカーソルがある状態でエンターキーを押下するとsubmitされてしまう。
(バリデーションが通っていない場合はエラーが表示されるが、通っていると保存されてしまう)
<template> <div> <Form @submit="register()" :validation-schema="schema" autocomplete="off" v-slot="{ errors, validate }" > <label for="name" >名前</label><span>必須</span> <Field type="text" v-model="form.name" id="name" name="name" /> <ErrorMessage name="name" /> <label for="interviewDate">メールアドレス</label><span>必須</span> <Field type="text" v-model="form.email" id="email" name="email" /> <ErrorMessage name="email" /> <button type="submit">保存</button> </Form> </div> </template> <script setup lang="ts"> import { ref, reactive, onMounted } from 'vue' import { Field, Form, ErrorMessage, useField, useForm, defineRule } from 'vee-validate' import { object, string, number } from 'yup' import * as yup from 'yup' interface FormInfo { name: string; email: string; } const form = reactive<FormInfo>({ name: '', email: '', }) const schema = object({ name: string().required('名前は必須です'), email: string().required('メールアドレスは必須です').email('正しいメールアドレスを記入してください').test('existCheck', 'メールアドレスは既に使用されています', existCheck), }); const register = async () => { console.log('register') ★axiosの処理 省略 } </script>
公式サイトの、Formコンポーネントのslotでvalidate
というものがありましたので試してみました。
@submit="register()"を消して、@click="validate()"を追加しました。
<template> <div> <Form :validation-schema="schema" autocomplete="off" v-slot="{ errors, validate }" > 省略 <button type="button" @click="validate()" >保存</button> </Form> </div> </template> <script setup lang="ts"> 省略 const register = async () => { console.log('register') ★axiosの処理 省略 } </script>
こちらですと、inputにカーソルを合わせてエンターキーを押下してもsubmitされず、
保存ボタンをクリックした時にバリデーションが走ってエラーメッセージ等が出ます。
ここまでは望んでいる動きですが、バリデーションが通ってもregister関数は発火しないので保存ができません。。
成功していたらregister関数を発火させたいのですが…うまくできず…
アドバイスをお願いします…
回答1件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/01/19 00:35