Form submit help
If my understanding is correct, button elements of type submit that are children of the form.Provider tag should trigger the
onSubmitonSubmit call specified in useFormuseForm. I don't know why but I can't seem to trigger this console log...export default function SigninForm({}) {
const form = useForm({
onSubmit: async (values) => {
console.log(values)
},
defaultValues: {
email: "",
password: "",
}
})
return(
<div className="flex flex-col">
<h1 className="text-3xl font-extrabold text-gray-900 mb-2">Sign in,</h1>
<div className="flex w-full border border-sky-600 mb-8"></div>
<form.Provider>
<SigninField name="email" label="Email" type="email" placeholder="Email" form={form}></SigninField>
<SigninField name="password" label="Password" type="password" placeholder="Password" form={form}>
</SigninField>
<FormExtras></FormExtras>
<Button type="submit" className="bg-sky-600 hover:bg-sky-500">Sign In</Button>
</form.Provider>
</div>
)
}export default function SigninForm({}) {
const form = useForm({
onSubmit: async (values) => {
console.log(values)
},
defaultValues: {
email: "",
password: "",
}
})
return(
<div className="flex flex-col">
<h1 className="text-3xl font-extrabold text-gray-900 mb-2">Sign in,</h1>
<div className="flex w-full border border-sky-600 mb-8"></div>
<form.Provider>
<SigninField name="email" label="Email" type="email" placeholder="Email" form={form}></SigninField>
<SigninField name="password" label="Password" type="password" placeholder="Password" form={form}>
</SigninField>
<FormExtras></FormExtras>
<Button type="submit" className="bg-sky-600 hover:bg-sky-500">Sign In</Button>
</form.Provider>
</div>
)
}
