質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1144閲覧

vee-validateでenterキー押下時はsubmitさせない

mikeko0901

総合スコア227

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2023/01/12 07:41

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関数を発火させたいのですが…うまくできず…

アドバイスをお願いします…

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<Form> や <Field> を使わず頑張るとかですかね

js

1<template> 2 <div> 3 <input v-model="emailValue" type="text" /> 4 5 <button @click="submit">Submit</button> 6 <p v-if="errorMessageEmail">{{ errorMessageEmail }}</p> 7 </div> 8</template> 9 10<script setup> 11import { useField } from 'vee-validate'; 12 13const { meta: emailValidateMeta, value: emailValue, errorMessage: errorMessageEmail } = useField("email", "required|email"); 14 15function submit(event) { 16 console.log("validate check"); 17 18 if (!emailValidateMeta.valid) { return; } 19 20 console.log("submit"); 21} 22</script>

投稿2023/01/13 11:01

yuma.inaura

総合スコア1451

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikeko0901

2023/01/19 00:35

ありがとうございます!useFieldを使ってみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問