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

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件

ベストアンサー

<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>