'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