Form validation helps to ensure that users of our application submit accurate and secure data that we intend to collect and use, like email addresses for newsletter marketing. Also, it helps prevent running into errors within our application as most data we collect from the user is used in different parts of our application, be it birthday dates, phone numbers, profile picture etc. Most importantly, form validation helps us communicate to the user in real time what is needed of them and guide them to interactively and accurately submit data into the forms by displaying them custom error messages before they submit to our database, thereby sanitizing user data before writing to our database.

Benefits of Next js server-side form validation

1. Security: By validating data on the server, you prevent malicious or invalid input from reaching your database. This helps protect against attacks like SQL injection.

2. Reliability: Client-side validation can be bypassed or tampered with while Server-side validation ensures that all data is checked regardless of the client's behavior.

3. Consistency: You can apply the same validation rules across different clients and platforms, ensuring data integrity.

4. Reduced network traffic: By validating on the server, you can send back specific error messages without multiple round-trips between client and server.

5. Better user experience: You can provide more accurate and detailed error messages based on server-side logic.

6. Easier maintenance: Centralizing validation logic on the server can make it easier to update and maintain compared to distributing it across various client-side implementations.

What is Zod? What's the benefit of using Zod?

Zod is a TypeScript first, data type declaration and validation library.

Zod has numerous benefits in our application, among them are listed below:

Works with plain JavaScript too! You don't need to use TypeScript.

Zero dependencies

Works in Node.js and all modern browsers

Tiny: 8kb minified + zipped

Immutable: methods (e.g. .optional()) return a new instance

Concise, chainable interface

Getting Started with Zod

You can install Zod using either of the following:

npm install zod      # npm
yarn add zod         # yarn
bun add zod          # bun
pnpm add zod         # pnpm

To build our form, we will be using shadcn UI which is an open source project of beautifully designed

re-usable components that you can copy and paste in your application.

Shadcn UI not only saves us the time to build forms by ourselves but also helps us build forms that are:

Well-structured and semantically correct.

Easy to use and navigate (keyboard).

Accessible with ARIA attributes and proper labels.

Has support for client and server side validation.

Easily customizable to match the style of the rest of the application

Getting started with shadcn UI

npx shadcn@latest init

Next to build our form, you’ll need to add the following components:

npx shadcn@latest add card
npx shadcn@latest add button
npx shadcn@latest add input

Next we are going to build a form to register our user to a database:

"use client";
import Link from "next/link";
import { createUser } from "@/actions/create-user";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useFormState } from "react-dom";

export const description =
  "A sign up form with first name, last name, email and password inside a card. There's an option to sign up with GitHub and a link to login if you already have an account";

export default function LoginForm() {
  const [formState, actions] = useFormState(createUser, { error: "" });
  return (
    <form action={actions}>
      <Card className="mx-auto max-w-sm">
        <CardHeader>
          <CardTitle className="text-xl">Sign Up</CardTitle>
          <CardDescription>
            Enter your information to create an account
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="grid gap-2">
                <Label htmlFor="first-name">First name</Label>
                <Input
                  type="text"
                  id="first-name"
                  name="firstName"
                  placeholder="Sammy"
                />
                {formState.error.firstName && (
                  <div className="text-xs text-red-600">
                    {formState.error.firstName}
                  </div>
                )}
              </div>
              <div className="grid gap-2">
                <Label htmlFor="last-name">Last name</Label>
                <Input
                  type="text"
                  id="last-name"
                  name="lastName"
                  placeholder="Robinson"
                />
                {formState.error.lastName && (
                  <div className="text-xs text-red-600">
                    {formState.error.lastName}
                  </div>
                )}
              </div>
            </div>
            <div className="grid gap-2">
              <Label htmlFor="email">Email</Label>
              <Input
                name="email"
                id="email"
                type="email"
                placeholder="m@example.com"
              />
              {formState.error.email && (
                <div className="text-xs text-red-600">
                  {formState.error.email}
                </div>
              )}
            </div>
            <div className="grid gap-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" name="password" type="text" />
              {formState.error.password && (
                <div className="text-xs text-red-600">
                  {formState.error.password}
                </div>
              )}
            </div>

            <Button variant="outline" className="w-full">
              Sign up with GitHub
            </Button>
          </div>
          <div className="mt-4 text-center text-sm">
            Already have an account?{" "}
            <Link href="#" className="underline">
              Sign in
            </Link>
          </div>
        </CardContent>
      </Card>
      <Button type="submit" className="w-full">
        Create an account
      </Button>
    </form>
  );
}

From the code above, you can basically see we are building a form with Input fields for firstName, lastName, Password and Emails.

Each field has a label attached to it for screen readers to read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.

To associate a given label element with an input field, you first need to add an id attribute to the input element. Next, add the htmlFor attribute to the label element, where the value of htmlFor is the same as the id in the input field.

Each input field also has a name attribute which helps to reference it’s input data when form data is submitted.

For each input field (first name, last name, email, and password), there's a conditional rendering block that checks if an error exists for that field in formState.error. If an error is present, it displays a small red text below the input field with the corresponding error message. For example, {formState.error.firstName && (<div className="text-xs text-red-600">{formState.error.firstName}</div>)} checks if there's an error for the first name field and displays it if it exists. This pattern is repeated for each field, allowing for field-specific error messages to be shown to the user when form validation fails.

Server Action to handle form validation and submit form data

We will create a server action by first specifying the term ‘use server’ at the top of our server action file then specifying a named export (named since we may have multiple actions on the same file related to the user e.g. create a user, delete a user, update a user detail etc.)

We will start by defining our schema as below:

"use server";
import { z } from "zod";
const userSchema = z.object({
  firstName: z
    .string({
      required_error: "Name is required",
      invalid_type_error: "Name must be a string",
    })
    .min(5, { message: "Must be 5 or more characters long" })
    .max(20, { message: "Maximum is 20 characters" }),
  lastName: z
    .string({
      required_error: "Name is required",
      invalid_type_error: "Name must be a string",
    })
    .min(5, { message: "Must be 5 or more characters long" })
    .max(20, { message: "Maximum is 20 characters" }),
  email: z.string().email(),
  password: z
    .string()
    .regex(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&#]{8,}$/,
      "Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character"
    ),
});

What does the schema above mean?

firstName and lastName fields:

Type: Both are strings.

Validation Rules:

Required: It must be provided, and if it's missing, an error message "Name is required" will be shown.

Type: The input must be a string, and if it's not, it will display the message "Name must be a string."

Length constraints:

Must have at least 5 characters, otherwise, it shows the message: "Must be 5 or more characters long."

Can have a maximum of 20 characters, otherwise, it shows the message: "Maximum is 20 characters."

email field:

Type: A string.

Validation Rule:

It must follow the structure of a valid email address, using Zod's built-in .email() method.

You can find other built in methods here.

password field:

Type: A string.

Validation Rule:

The password must match the provided regular expression:

At least one lowercase letter ((?=.*[a-z])).

At least one uppercase letter ((?=.*[A-Z])).

At least one digit ((?=.*\d)).

At least one special character ((?=.*[@$!%*?&])).

Must be at least 8 characters long.

If the password does not meet these criteria, the custom error message "Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character" will be displayed.

The password regex enforces the following rules:

At least 8 characters long

Contains at least one lowercase letter

Contains at least one uppercase letter

Contains at least one digit

Contains at least one special character (@$!%*?&#)

After specifiying the schema, we now need to pass our formData through that schema structure and sanitize our data according to what rules we have set, if it succeeds we can go on and console log the data otherwise we return an error object inclusive of all error fields:

"use server";
import { z } from "zod";
const userSchema = z.object({
  firstName: z
    .string({
      required_error: "Name is required",
      invalid_type_error: "Name must be a string",
    })
    .min(5, { message: "Must be 5 or more characters long" })
    .max(20, { message: "Maximum is 20 characters" }),
  lastName: z
    .string({
      required_error: "Name is required",
      invalid_type_error: "Name must be a string",
    })
    .min(5, { message: "Must be 5 or more characters long" })
    .max(20, { message: "Maximum is 20 characters" }),
  email: z.string().email(),
  password: z
    .string()
    .regex(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&#]{8,}$/,
      "Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character"
    ),
});
export async function createUser(formState, formData) {
  console.log(formData.get("password"));
  const validatedUser = userSchema.safeParse({
    firstName: formData.get("firstName"),
    lastName: formData.get("lastName"),
    email: formData.get("email"),
    password: formData.get("password"),
  });

  if (!validatedUser.success) {
    return {
      error: validatedUser.error.flatten().fieldErrors,
    };
  }

  if (validatedUser.success) {
    console.log(validatedUser.data);
  }
}

That should be all, even though we are only console logging the data, I'll set up the next one to save on a real world database, make sure to check that out.