'Form-submit is redirecting to home page if ENTER key is used to submit
I am using the RC for nuxt3. Additionally, I am validating forms using vee-validate.
Now I mentioned this behavior: If I click "Sign In" having all required fields filled in correctly, I am getting redirected to /
. If I click the very same button, the console.log
-output is being printed in the console.
<template>
<NuxtLayout name="blank">
<VForm ref="authform" :validation-schema="schema" class="w-full" @submit="onSubmit">
<div class="mt-8">
<div class="mt-6">
<div class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700"> Email
address </label>
<div class="mt-1">
<FormInputEmail v-model="form.email" name="form.email"/>
</div>
</div>
<div class="space-y-1">
<label for="password" class="block text-sm font-medium text-gray-700">
Password </label>
<div class="mt-1">
<FormInputPassword v-model="form.secret" name="form.secret"/>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox"
class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"/>
<label for="remember-me" class="ml-2 block text-sm text-gray-900"> Remember
me </label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500"> Forgot
your password? </a>
</div>
</div>
<div>
<FormElementButton name="signin" :title="$t('signin.button')" class="w-full"/>
</div>
</div>
</div>
</div>
</VForm>
</NuxtLayout>
</template>
<script setup>
import {ref, computed} from 'vue';
import {Form as VForm, useForm} from "vee-validate";
import {object, string} from "yup"
import {useAPIFetch} from "../../composable/useAPIFetch";
const { handleSubmit } = useForm();
const form = ref({
email: '',
password: ''
});
const schema = computed( () => {
return object().shape({
form: object().shape({
email: string().required("Email is required").email("Email is invalid"),
secret: string().min(6).required()
}),
});
});
const onSubmit = handleSubmit(values => {
console.log(values)
});
</script>
What I tried: Using @submit.prevent
does not work and results in the same problem.
I also removed by custom inputs and replaced them with basic <input>
-fields, which unfortunately has the same effect.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|