Next.js Discord

Discord Forum

Client and Server Validation for Forms with Actions

Answered
Scott's Oriole posted this in #help-forum
Open in Discord
Scott's OrioleOP
Hi guys! Using react hook form and zod for validatoin. I am curious how we can provide client side validation with form actions?? Since we are passing action={formAction}, how can we trigger client side validation with the onSubmit={}?

I have been using:
onSubmit={(evt) => {
evt.preventDefault()
form.handleSubmit(() => {
formAction(new FormData(formRef.current!))
})(evt)
}}

But curious if there is a better pattern to trigger validation on client. Thanks!!
Answered by averydelusionalperson
View full answer

5 Replies

I do it like this. addEntry is a server action
Answer
@averydelusionalperson Click to see attachment
Scott's OrioleOP
Thanks! Not that this is super important, but would that work if js is diabled on client?
I don't think so.
@Scott's Oriole Thanks! Not that this is super important, but would that work if js is diabled on client?
if js is disabled it wont work. But you can always add action (in addition to onSubmit) to enable progressive enhancement