How can i validate this form with React Hook Form and Formcarry ?
I think I missed something or there is a logic error
Here is my code:
import { useForm } from "react-hook-form";
import { useForm as formCarry } from "@formcarry/react";
function Iletisim() {
const FORM_ID = process.env.NEXT_PUBLIC_FORM_ID;
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const { state, submit } = formCarry({
id: FORM_ID,
});
return (
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 gap-5 py-8 md:grid-cols-2 md:py-16">
<section className="">
<div className="rounded-lg bg-white p-8 shadow-lg lg:col-span-3 lg:p-12">
{state.submitted ? (
<div>success</div>
) : (
<form className="space-y-4" onSubmit={handleSubmit(submit)}>
<div>
<label className="sr-only" htmlFor="name">
Name
</label>
<input
className="w-full rounded-lg border p-3 text-sm drop-shadow-xl focus-within:outline-none focus:border-rose-600"
placeholder="İsim"
type="text"
id="name"
name="name"
{...register("name", { required: true })}
/>
{errors.name && errors.name.type === "required" && (
<div className="mt-2 flex items-center gap-2 rounded-xl bg-blue-100 p-2">
<p className="font-bold text-blue-700">
Size hitap edebilmemiz için lütfen isminizi belirtiniz.
</p>
</div>
)}
</div>
<div className="mt-4">
<button
type="submit"
className="inline-flex w-full items-center justify-center rounded-lg bg-rose-600 px-5 py-3 text-white sm:w-auto"
>
<span className="font-medium"> Gönder </span>
</button>
</div>
</form>
)}
</div>
</section>
</div>
</div>
);
}
export default Iletisim;
I used Formcarry and React Hook Form. Formcarry works correctly like this
onSubmit={submit}
After clicking the submit button it gives this error
Unhandled Runtime Error
TypeError: event.preventDefault is not a function