I am facing an issue with submitting a registration form that uses vee-validator for data validation. The handleSubmit function from vee-validator seems to be not returning or logging anything.
Here is my code:
<script setup lang="ts">
import type { User } from '@/models/user';
import { useUserStore } from '@/stores/client/user';
import { ref } from 'vue';
import { useForm } from 'vee-validate';
import * as yup from 'yup';
const schema = yup.object({
name: yup.string().required('Name is required'),
surnames: yup.string().required('Surname is required'),
birthdate: yup.date().nullable().required('Birthdate is required').transform((value, originalValue) => originalValue === '' ? null : value),
email: yup.string().email('Email is not valid').required('Email is required'),
password: yup.string().min(8, 'Password is too short - should be 8 chars minimum.').required('Password is required'),
passwordConfirmation: yup.string()
.oneOf([yup.ref('password'), undefined], 'Passwords must match')
.required('Password confirmation is required'),
});
const { handleSubmit, defineField, meta, errors } = useForm({
validationSchema: schema
});
const [name, nameAttrs] = defineField('name');
const [surnames, surnamesAttrs] = defineField('surnames');
const [email, emailAttrs] = defineField('email');
const [password, passwordAttrs] = defineField('password');
const [passwordConfirmation, passwordConfirmationAttrs] = defineField('passwordConfirmation');
const onSubmit = handleSubmit(values => {
console.log('Handling submit:', values);
console.log("Form submitted");
console.log("Values:", values);
console.log("Is form valid?", meta.value.valid);
});
</script>
<template>
<section class="form-section">
<div class="form-container">
<h1 class="form-title">Create an account</h1>
<form @submit.prevent="onSubmit" novalidate>
<input type="text" v-model="name" v-bind="nameAttrs" placeholder="Your name" class="input-field" required>
<span v-if="errors.name" class="error-message">{{ errors.name }}</span>
<input type="text" v-model="surnames" v-bind="surnamesAttrs" placeholder="Your surnames" class="input-field" required>
<span v-if="errors.surnames" class="error-message">{{ errors.surnames }}</span>
<input type="email" v-model="email" v-bind="emailAttrs" placeholder="Your email" class="input-field" required>
<span v-if="errors.email" class="error-message">{{ errors.email }}</span>
<input type="password" v-model="password" v-bind="passwordAttrs" placeholder="Password" class="input-field" required>
<span v-if="errors.password" class="error-message">{{ errors.password }}</span>
<input type="password" v-model="passwordConfirmation" v-bind="passwordConfirmationAttrs" placeholder="Confirm password" class="input-field" required>
<span v-if="errors.passwordConfirmation" class="error-message">{{ errors.passwordConfirmation }}</span>
<button type="submit" class="submit-button">Create an account</button>
<p class="link-text">Already have an account? <a href="/login" style="color: #007BFF;">Login here</a></p>
</form>
</div>
</section>
</template>
The onSubmit method is supposed to print the values from the handleSubmit in the console, but it appears to be malfunctioning.