Next.js Discord

Discord Forum

Is there a way to validate the form on the client side before calling the server action?

Answered
Seppala Siberian Sleddog posted this in #help-forum
Open in Discord
Seppala Siberian SleddogOP
I have a form that contains a file input and I want to validate the file size before calling the server action how can I achieve that?
Answered by Seppala Siberian Sleddog
I found the solution, If I used the form onSubmit handler and prevented the default I can validate on the client side before validating on the server side like this 
return <form action={serverAction} onSubmit={(e)=> {
  e.preventDefault()
  // client side validtion if pass
  // request form submission and this will call the server action
}}></form>
View full answer

10 Replies

American black bear
is it a normal file input or a dropzone?
Seppala Siberian SleddogOP
A normal file input
American Crow
@American Crow Click to see attachment
Seppala Siberian SleddogOP
I know zod but that's not my question my question can I do it before triggering the server action?
@Seppala Siberian Sleddog I have a form that contains a file input and I want to validate the file size before calling the server action how can I achieve that?
Turkish Van
I assume You are using the Form element with its action feature. If I understood it properly You want to validate it in a moment user submits a form.

In case You are using a Server component for that, I think the only way to achieve that would be to pass a Server Action, that validates the form and calls the appropriate Server Action, to the Form action attribute. I am not saying that would be an optimal way to handle it since You would be having an extra request by doing that.

That would look like this:
return (
        <form
            action={(formData: FormData) => {
                "use server";
                // Form validation
                await uploadFile();
            }}>
            {/*Inputs*/}
            {/*Submit Button*/}
        </form>
    );


In case You are using Client component for that, You could pass callback to action attribute which would look like this:
return (
        <form
            action={(formData: FormData) => {
                // Form validation
                await uploadFile();
            }}>
            {/*Inputs*/}
            {/*Submit Button*/}
        </form>
    );
@Seppala Siberian Sleddog The actual use case is how can accomplish something like this using server actions jsx return <form onSubmit={(e)=> { e.preventDefault() // Call an API after client side validation }}> <form/>
JChicano
can i ask, how you call an API fetching the data with POST? 
// Tu código JavaScript aquí
const response = await fetch("/api/auth/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(result.data),
    });

Bcs im doing this, and it doesnt finding the file
@Seppala Siberian Sleddog The actual use case is how can accomplish something like this using server actions jsx return <form onSubmit={(e)=> { e.preventDefault() // Call an API after client side validation }}> <form/>
Turkish Van
If I understood properly what exactly You want to achieve, You can call Server Action as You would call a regular async function. Just as I explained above.
@Turkish Van If I understood properly what exactly You want to achieve, You can call Server Action as You would call a regular `async` function. Just as I explained above.
Seppala Siberian SleddogOP
I found the solution, If I used the form onSubmit handler and prevented the default I can validate on the client side before validating on the server side like this 
return <form action={serverAction} onSubmit={(e)=> {
  e.preventDefault()
  // client side validtion if pass
  // request form submission and this will call the server action
}}></form>
Answer