Anyone know this issue??

Why are you using new FormData?, you don't need it

Submit even is usually not triggered when there's an invalid field

Try to see if that's the issue
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/checkValidity

Or otherwise it could be zod/RHF preventing a successful event

Another common issue I remember (with formik) was when I forgot to include "name" in all the required places

then??

what should i use?

but i problem it when i just add a empty space it works

which doesnt make any sense

Nothing, submit return object values

see the video

Yes that's what you're supposed to debug

I am not getting the answer after endless debuging

as if some hidden stuff blocking the event

show the for code

That's exactly what I said

for code?

yes show code

No, something is preventing a submit event.
It's either the native form, or zod/rhf

In the later case, the submit event would be firing, just your function wouldn't run

@Dwarf Hotot its a very big code so i used pastebin

Remove validation completely

Zod is blocking as this but

When i already filled the form

<Form {...zohoForm}>
<form
onSubmit={zohoForm.handleSubmit(onSubmitZohoForm)}
className="w-full mt-3"
>
<div className="grid grid-cols-1 gap-2 fetch_country">
<FormField
control={zohoForm.control}
name="name"
render={({ field }) => (
<FormItem>
<FormControl>
<div className="flex items-center border border-gray-200 rounded-lg px-2 2xl:py-1">
<User color="black" className="w-[20px] h-[20px]" />
<Input
type="text"
placeholder="Name *"
className="focus-visible:ring-0 border-none focus:ring-0 bg-none outline-0 focus-visible:ring-offset-0"
{...field}
/>
</div>


handle form like this

From where Form Control and FormItems are coming?

Shadcn?

yes

"use client";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { useEffect, useState } from "react";
import { Button } from "../ui/button";
import Image from "next/image";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "../custom/custom-select";
import {
Form,
FormControl,
FormField,
FormItem,
FormMessage,
} from "@/components/ui/form";