NextJS App Router - <form/> component and client-side validation
Answered
Philippine Crocodile posted this in #help-forum
Philippine CrocodileOP
I wish to utilize NextJS App Router / React Server Component <form/> component and form actions
However, I wish to validate input values on the client, simply check if required fields are not empty, before submitting the form action to the server, as I don't need anything on the server for that and I don't wish to clear the entire form field if the user just forgets one value
What is the best way to do this? Thank you!
However, I wish to validate input values on the client, simply check if required fields are not empty, before submitting the form action to the server, as I don't need anything on the server for that and I don't wish to clear the entire form field if the user just forgets one value
What is the best way to do this? Thank you!
Answered by LuisLl
I see what you want, and there are multiple ways you can achieve this, either way I would recommend to handle forms in client components, almost always:
1. The least secure way would be setting the required prop in your inputs, since this can be disabled with the Browser Devtools. But it would work for really simple use cases.
2. If the form is in a Client Component the most obvious solution would be to keep the fields on React State and call your Server Action from within the
3. Using a Form library like React Hook Form which lets you provide validations via Zod and handles almost everything you'd need, including when you are allowed to call the onSubmit handler. But this is overkill for simple use cases or simple forms.
4. If you're using React 19, implement the [useActionState](https://react.dev/reference/react/useActionState) hook, modify your Server Action to work with this hook and inside of it return the errors and the current fields values. When you submit the form, the action prop will hit the server and when the Server Action completes it will reset your fields (that's the default behavior and can't be disabled, afaik), but you can set a defaultValue on your inputs to take the previous value that was returned by your action, this way the inputs that weren't the problem will be filled again. Check out this [Lee Rob's video](https://youtu.be/KhO4VjaYSXU?si=yMqq7zEbCOZx_VMe)
1. The least secure way would be setting the required prop in your inputs, since this can be disabled with the Browser Devtools. But it would work for really simple use cases.
2. If the form is in a Client Component the most obvious solution would be to keep the fields on React State and call your Server Action from within the
onSubmit callback of the form. This way you can decide when to call the Server Action, so the Server won't even get hit with the form fields unless they pass the validations.3. Using a Form library like React Hook Form which lets you provide validations via Zod and handles almost everything you'd need, including when you are allowed to call the onSubmit handler. But this is overkill for simple use cases or simple forms.
4. If you're using React 19, implement the [useActionState](https://react.dev/reference/react/useActionState) hook, modify your Server Action to work with this hook and inside of it return the errors and the current fields values. When you submit the form, the action prop will hit the server and when the Server Action completes it will reset your fields (that's the default behavior and can't be disabled, afaik), but you can set a defaultValue on your inputs to take the previous value that was returned by your action, this way the inputs that weren't the problem will be filled again. Check out this [Lee Rob's video](https://youtu.be/KhO4VjaYSXU?si=yMqq7zEbCOZx_VMe)
9 Replies
@Philippine Crocodile I wish to utilize NextJS App Router / React Server Component <form/> component and form actions
However, I wish to validate input values on the client, simply check if required fields are not empty, before submitting the form action to the server, as I don't need anything on the server for that and I don't wish to clear the entire form field if the user just forgets one value
What is the best way to do this? Thank you!
Oriental
A validation library like zod can work https://zod.dev/?id=introduction
Philippine CrocodileOP
ok sure with zod or not how do you call the code client-side before the form action executes on the server?
im literally just checking if value is not an empty string ‘’
Oriental
You can specify an input field as required
It would help if you could paste some code as well.
I see what you want, and there are multiple ways you can achieve this, either way I would recommend to handle forms in client components, almost always:
1. The least secure way would be setting the required prop in your inputs, since this can be disabled with the Browser Devtools. But it would work for really simple use cases.
2. If the form is in a Client Component the most obvious solution would be to keep the fields on React State and call your Server Action from within the
3. Using a Form library like React Hook Form which lets you provide validations via Zod and handles almost everything you'd need, including when you are allowed to call the onSubmit handler. But this is overkill for simple use cases or simple forms.
4. If you're using React 19, implement the [useActionState](https://react.dev/reference/react/useActionState) hook, modify your Server Action to work with this hook and inside of it return the errors and the current fields values. When you submit the form, the action prop will hit the server and when the Server Action completes it will reset your fields (that's the default behavior and can't be disabled, afaik), but you can set a defaultValue on your inputs to take the previous value that was returned by your action, this way the inputs that weren't the problem will be filled again. Check out this [Lee Rob's video](https://youtu.be/KhO4VjaYSXU?si=yMqq7zEbCOZx_VMe)
1. The least secure way would be setting the required prop in your inputs, since this can be disabled with the Browser Devtools. But it would work for really simple use cases.
2. If the form is in a Client Component the most obvious solution would be to keep the fields on React State and call your Server Action from within the
onSubmit callback of the form. This way you can decide when to call the Server Action, so the Server won't even get hit with the form fields unless they pass the validations.3. Using a Form library like React Hook Form which lets you provide validations via Zod and handles almost everything you'd need, including when you are allowed to call the onSubmit handler. But this is overkill for simple use cases or simple forms.
4. If you're using React 19, implement the [useActionState](https://react.dev/reference/react/useActionState) hook, modify your Server Action to work with this hook and inside of it return the errors and the current fields values. When you submit the form, the action prop will hit the server and when the Server Action completes it will reset your fields (that's the default behavior and can't be disabled, afaik), but you can set a defaultValue on your inputs to take the previous value that was returned by your action, this way the inputs that weren't the problem will be filled again. Check out this [Lee Rob's video](https://youtu.be/KhO4VjaYSXU?si=yMqq7zEbCOZx_VMe)
Answer
@LuisLl I see what you want, and there are multiple ways you can achieve this, either way I would recommend to handle forms in client components, almost always:
1. The least secure way would be setting the **required prop** in your inputs, since this can be disabled with the Browser Devtools. But it would work for really simple use cases.
2. If the form is in a Client Component the most obvious solution would be to keep the fields on **React State** and call your Server Action from within the `onSubmit` callback of the form. This way you can decide when to call the Server Action, so the Server won't even get hit with the form fields unless they pass the validations.
3. Using a Form library like **React Hook Form** which lets you provide validations via Zod and handles almost everything you'd need, including when you are allowed to call the onSubmit handler. But **this is overkill for simple use cases** or simple forms.
4. If you're using React 19, implement the [**useActionState**](<https://react.dev/reference/react/useActionState>) hook, modify your Server Action to work with this hook and inside of it return the *errors* and the *current fields values*. When you submit the form, the **action prop** will hit the server and when the Server Action completes it will reset your fields (that's the default behavior and can't be disabled, afaik), but you can set a **defaultValue** on your inputs to take the *previous value that was returned by your action*, this way the inputs that weren't the problem will be filled again. Check out this [Lee Rob's video](<https://youtu.be/KhO4VjaYSXU?si=yMqq7zEbCOZx_VMe>)
Philippine CrocodileOP
Thanks, Vito. Thanks so much, Luis, #4 is exactly what I was looking for 🙌 For reference for others, the video isn't long, but the pattern is explained starting at timestamp 5:00 minutes to the remainder of the video
Happy to help!;)