I have this project in laravel with vue js and this registration form that uses vuelidate to validate all fields. the problem is that when I submit it I could not get the inputted data from the the fields. I think it has to do with the vuelidate library that I use. if there's any mistake im willing to learn from it. I'm new to vue so im not that familiar with it. thank you for your help
<form @submit.prevent="submit">
<div class="flex justify-center items-center gap-3">
<div>
<TextInput
:class="{
'bg-red-50 border border-red-500 text-red-900 placeholder-red-700':
v$.firstName.$error,
}"
placeholder="Given Name"
id="firstName"
type="text"
class="mt-1 block w-full"
v-model="state.firstName"
autofocus
autocomplete="given-name"
@blur="v$.firstName.$touch()"
@keyup.tab="v$.firstName.$touch()"
/>
<InputError
class="mt-2"
v-if="v$.firstName.$error"
:message="v$.firstName.$errors[0].$message"
/>
</div>
<div>
<TextInput
:class="{
'bg-red-50 border border-red-500 text-red-900 placeholder-red-700':
v$.lastName.$error,
}"
placeholder="Family Name"
id="lastName"
type="text"
class="mt-1 block w-full"
v-model="state.lastName"
autocomplete="family-name"
@blur="v$.lastName.$touch()"
@keyup.tab="v$.lastName.$touch()"
/>
<InputError
class="mt-2"
v-if="v$.lastName.$error"
:message="v$.lastName.$errors[0].$message"
/>
</div>
</div>
<div class="mt-3">
<TextInput
:class="{
'bg-red-50 border border-red-500 text-red-900 placeholder-red-700':
v$.email.$error,
}"
placeholder="Email Address"
id="email"
type="email"
class="mt-1 block w-full"
v-model="state.email"
autocomplete="username"
@blur="v$.email.$touch()"
@keyup.tab="v$.email.$touch()"
/>
<InputError
v-if="v$.email.$error"
class="mt-2"
:message="v$.email.$errors[0].$message"
/>
</div>
<div class="mt-3">
<TextInput
:class="{
'bg-red-50 border border-red-500 text-red-900 placeholder-red-700':
v$.password.$error,
}"
v-model="state.password"
id="password"
class="mt-1 block w-full"
autocomplete="new-password"
placeholder="New Password"
type="password"
@blur="v$.password.$touch()"
@keyup.tab="v$.password.$touch()"
/>
<InputError
v-if="v$.password.$error"
class="mt-2"
:message="v$.password.$errors[0].$message"
/>
</div>
<InputLabel value="Gender" class="mt-3" />
<div class="flex justify-center items-center gap-3">
<RadioInput
:class="{
'bg-red-50 border border-red-500 text-red-900 placeholder-red-700':
v$.gender.$error,
}"
:modelValue="state.gender"
@update:modelValue="state.gender = $event"
id="maleRadio"
class="mt-1 w-full bg-white/70"
name="gender"
value="male"
>
Male
</RadioInput>
<RadioInput
:modelValue="state.gender"
@update:modelValue="state.gender = $event"
id="femaleRadio"
class="mt-1 w-full bg-white/70"
name="gender"
value="female"
:class="{
'bg-red-50 border border-red-500 text-red-900 placeholder-red-700':
v$.gender.$error,
}"
>
Female
</RadioInput>
</div>
<InputError
v-if="v$.gender.$error"
class="mt-2"
:message="v$.gender.$errors[0].$message"
/>
<InputLabel value="Section" class="mt-3" />
<div class="flex flex-col gap-3">
<div>
<select
v-model="state.sectionId"
:class="{
'bg-red-50 border border-red-500 text-red-900 placeholder-red-700':
v$.sectionId.$error,
}"
id="sectionId"
@change="getDivision($event)"
@blur="v$.sectionId.$touch()"
@keyup.tab="v$.sectionId.$touch()"
class="mt-1 bg-white/70 w-full bg-white border-gray-300 focus:border-green-500 focus:ring-green-500 rounded-md py-2.5"
>
<option selected disabled>Choose a section</option>
<option :value="section.id" v-for="section in sections">
{{ section.section_name }}
</option>
</select>
<InputError
v-if="v$.sectionId.$error"
class="mt-2"
:message="v$.sectionId.$errors[0].$message"
/>
</div>
<div>
<select
:class="{
'bg-red-50 border border-red-500 text-red-900 placeholder-red-700':
v$.divisionId.$error,
}"
v-model="state.divisionId"
:disabled="isDisabled"
id="division"
@blur="v$.divisionId.$touch()"
@keyup.tab="v$.divisionId.$touch()"
class="mt-1 bg-white/70 w-full bg-white border-gray-300 focus:border-green-500 focus:ring-green-500 rounded-md py-2.5"
>
<option selected disabled>Choose a division</option>
<option
:value="division.id"
v-for="division in divisions"
>
{{ division.division_name }}
</option>
</select>
<InputError
v-if="v$.divisionId.$error"
class="mt-2"
:message="v$.divisionId.$errors[0].$message"
/>
</div>
</div>
<div class="flex flex-col items-center justify-end mt-4">
<PrimaryButton
class="w-60 mt-3"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
>
Create Account
</PrimaryButton>
</div>
</form>
<script setup>
const props = defineProps({
sections: {
type: Array,
},
});
const isDisabled = ref([true]);
const sections = props.sections;
const divisions = ref([]);
const form = useForm({
firstName: "",
lastName: "",
gender: "",
email: "",
password: "",
divisionId: null,
});
const rules = computed(() => {
return {
firstName: { required, $lazy: true, $autoDirty: true },
lastName: { required, $lazy: true, $autoDirty: true },
gender: { required, $lazy: true, $autoDirty: true },
email: { required, email, $lazy: true, $autoDirty: true },
password: {
required,
$lazy: true,
minLength: minLength(8),
$autoDirty: true,
},
sectionId: { required, $lazy: true, $autoDirty: true },
divisionId: { required, $lazy: true, $autoDirty: true },
};
});
const state = reactive({
firstName: "",
lastName: "",
gender: "",
email: "",
password: "",
sectionId: null,
divisionId: null,
});
const v$ = useVuelidate(rules, state);
const getDivision = async (event) => {
// Do something when the select value changes
const selectedId = event.target.value;
console.log("Selected id:", selectedId);
try {
if (selectedId == "null") {
isDisabled.value = true;
return;
}
const response = await axios.get("/get_divisions/" + selectedId);
divisions.value = response.data;
isDisabled.value = false;
} catch (error) {
isDisabled.value = true;
console.error("Error fetching divisions:", error);
}
};
const submit = async () => {
v$.value.$touch();
if (!v$.value.$error) {
try {
await state.post(route("register"));
state.reset("password", "password_confirmation");
} catch (error) {
// Handle error if form submission fails
console.error("Error submitting form:", error);
}
} else {
alert("Please fill all fields");
}
};
</script>
I tried changing the v-model back to form.firstName but using wont be validate the fields