Form Validation in Next.js

In this tutorial, you will learn about Form Validations in Next.js. We have two types of validations.

Client-side validations.
Server-side validations.

1. Client Side validation

Client-side validation means the Form will validate on the browser side, not the server side.

Example: In the example below, you will see email validation on the client side.


"use client";
import { useState } from "react";

export default function LoginForm() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!email.includes("@")) {
      setError("Enter a valid email address");
      return;
    }

    alert("Form submitted!");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <p style={{ color: "red" }}>{error}</p>
      <button>Submit</button>
    </form>
  );
}

2. Server-side validation

Server-side validation means the Form will validate on the server side, not the client side.

Example:


"use server";

export async function register(formData) {
  const email = formData.get("email");

  if (!email.includes("@")) {
    return { error: "Invalid email" };
  }

  // proceed with DB
}

Form Validation in Next.js – Interview Questions

Q 1: What types of form validation exist?

Ans: Client-side and server-side validation.

Q 2: Which is more secure?

Ans: Server-side validation.

Q 3: Can libraries be used?

Ans: Yes, Zod and Yup are common.

Q 4: Can validation be done in Server Actions?

Ans: Yes.

Q 5: Why is validation important?

Ans: Data integrity and security.