Implement a Server Action for Handling Form Data

We've seen three ways to handle verification: two involving sending data to an API endpoint, and one using a server action to post data to the server.

Now we'll look at our fourth method: using a server action that posts form data to the server instead of just using a schema. This approach has an advantage the the others don't.

Setting up Form Data Action

Start by creating a new onFormAction function inside of page.tsx.

We can simply copy and paste the onDataAction we used last time and modify it slightly. This time the the function will accept formData argument that is typed as FormData, and the parsing steps will be updated accordingly:

const onFormAction = async (formData: FormData) => {
  "use server";
  const data = Object.fromEntries(formData);
  const parsed = schema.safeParse(data);
  // conditional logic below
  ...

With that change in place, we need to update the RegistrationForm component.

Updating RegistrationForm

Over in RegistrationForm.tsx, comment out the previous implementation.

Then we'll replace the data variable with formData and formAction, then replace the data action with formAction to handle our server data postings:

// inside of RegistrationForm
const onSubmit = async (data: z.infer<typeof schema>) => {
  // commented out fetch implementations above
  const formData = new FormData();
  formData.append("first", data.first);
  formData.append("last", data.last);
  formData.append("email", data.email);
  console.log(await formAction(formData));
}

With this change, we can test the form in our browser and it works as expected.

However, there's an easier way to do this that has the added benefit of working even when JavaScript isn't enabled.

Add Form State to the Registration Form

Back inside of RegistrationForm.tsx, import useFormState from react-dom. This will allow us to have React manage our form state:

import { useFormState } from "react-dom";

The useFormState hook takes onFormAction as the first argument and the initial state as the second argument. In our case, we'll set it to an object with a message property set to nothing. We'll then destructure the current form state and the formAction from the hook:

// inside of RegistrationForm
const [state, formAction] = useFormState(onFormAction, {
  message: ""
});

We can then use this state and formAction inside of the form.

Updating the Rendered Form

Inside the <Form> component returned from the RegistrationForm, we'll add a div to conditionally display the message from state, and add the formAction to the form's action attribute:

// inside of RegistrationForm

return (
  <Form {...form}>
    <div>{state?.message}</div>
    <form
      action={formAction}
      onSubmit={handleSubmit(onSubmit)}
      className="space-y-8"
    >
      ...

For the time being, comment out the implementation of the onSubmit to test the form without validation.

When hitting the submit button, we'll see the "Invalid data" message appear which is coming from the server.

However, we want to have the client-side validation back.

Handling Form Submissions with useRef

In order to handle the form validation, we'll use React's useRef hook to get a reference to the form. First, import useRef:

import { useRef } from "react";

Next, create a new formRef inside of the RegistrationForm component and set it to the HTMLFormElement reference:

// Above the return inside of RegistrationForm
const formRef = useRef<HTMLFormElement>(null);

Then inside of the form, we'll add the ref pointing to formRef and update the onSubmit prop. Instead of calling onSubmit directly, we can give it a function that will use the formRef to call the actual submit function on the form:

<form
  ref={formRef}
  action={formAction}
  onSubmit={form.handleSubmit(() => formRef?.current?.submit())}
  className="space-y-8"
>
  ...

Now when we hit the submit button, the legit submit action on the form will be called, which will trigger our formAction and send our data.

Final Testing

After making this change, we'll test our form. Hitting submit works just like we want it to. We've still got our client-side validation, but now our server-side validation kicks in when the client-side validation doesn't pick up something. We get the "User registered" message and everything works as expected.

What's more, even if you disable JavaScript, the form submission and server-side validation still work perfectly!

That's the importance of both client-side and server-side validations– they ensure data integrity and security in seamless user experience, even when JavaScript is disabled.

In the next video, we'll dive into something even more interesting: server-side field validation. Stay tuned!