Next.js Form Validation and Error Handling

Introduction

Next.js is a powerful framework for building server-rendered React applications. With its advanced features like file-based routing, built-in server-side rendering, automatic code splitting, and more, it can help you build efficient and maintainable web applications.

One of the important aspects of web applications is form validation and error handling. Next.js provides several approaches to handle form validation and errors. In this tutorial, we will explore some of these approaches and learn how to implement them in your Next.js applications.

Steps

1. Setting up the Environment

Before we start, make sure you have Node.js installed on your system. If not, download and install it from the official website.

Once you have Node.js installed, create a new Next.js application using the following command:

npx create-next-app next-form-validation

Then navigate into the created directory and start the development server using the following commands:

cd next-form-validation
npm run dev

2. Creating the Form

Let's start by creating a simple form in our application. Create a new file inside the pages directory named index.js with the following code:

import React, { useState } from 'react';

const Index = () => {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')

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

    // TODO: handle form submission
  }

  return (
    <div>
      <h1>Next.js Form Validation and Error Handling</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            Name:
            <input type="text" value={name} onChange={(event) => setName(event.target.value)} />
          </label>
        </div>
        <div>
          <label>
            Email:
            <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} />
          </label>
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default Index;

This code defines a simple form with two input fields, name and email, and a submit button. We are using the useState hook to keep track of the input field values.

3. Adding Form Validation

Now, let's add validation to our form. We will perform the validation on form submission. Modify the handleSubmit() function as follows:

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

  if (name.trim() === '') {
    alert('Name is required');
    return;
  }
  if (!/\S+@\S+\.\S+/.test(email)) {
    alert('Email is invalid');
    return;
  }

  // TODO: handle form submission
}

In this code, we are checking if the name field is not empty and the email field is in a valid format. If any of the conditions fail, we are displaying an error message to the user using the alert() function. If the validation passes, we perform form submission.

4. Displaying Form Errors

Now, let's modify our form to display validation errors to the user. Add the following code inside the form element:

<div>
  <label>
    Name:
    <input type="text" value={name} onChange={(event) => setName(event.target.value)} />
  </label>
  {name.trim() === '' && <p style={{color: 'red'}}>Name is required</p>}
</div>
<div>
  <label>
    Email:
    <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} />
  </label>
  {!/\S+@\S+\.\S+/.test(email) && <p style={{color: 'red'}}>Email is invalid</p>}
</div>     

In this code, we are displaying an error message below each input field if the validation fails. The error message is displayed conditionally based on whether the validation has failed using the && operator.

5. Preventing Multiple Form Submission

Lastly, let's add code to prevent multiple form submission to our form. We can achieve this by disabling the submit button while the form is being submitted. Modify the handleSubmit() function as follows:

const handleSubmit = async (event) => {
  event.preventDefault();

  if (name.trim() === '') {
    alert('Name is required');
    return;
  }
  if (!/\S+@\S+\.\S+/.test(email)) {
    alert('Email is invalid');
    return;
  }

  event.target.elements.submit.disabled = true

  // TODO: handle form submission

  event.target.elements.submit.disabled = false
}

In this code, we are disabling the submit button before the form is submitted. After the form submission, we are enabling the button again.

Conclusion

In this tutorial, we have learned how to perform form validation and error handling in Next.js applications. We have explored various approaches to handle the validation and errors and added some features to our simple form using these approaches. Proper form validation and error handling can improve the user experience significantly. Use these approaches to enhance your Next.js applications.