Next.js Form Validation

Form validation is a critical aspect of web development that ensures users provide correct and appropriate data. In this tutorial, we'll explore how to implement effective form validation in Next.js applications.

Introduction to Form Validation

Form validation helps prevent invalid data from being submitted to your server, improving data quality and user experience. Next.js, as a React framework, offers several approaches to form validation, from simple client-side validation to more complex server-side validation.

Why Form Validation Matters

Data Integrity: Ensures the data collected meets your application's requirements
User Experience: Provides immediate feedback when users make mistakes
Security: Helps prevent malicious input that could lead to security vulnerabilities
Reduced Server Load: Validates data before making unnecessary server requests

Basic Client-Side Validation

Let's start with the simplest form of validation using HTML5 attributes.

HTML5 Form Validation

Next.js supports all standard HTML5 validation attributes like required, minlength, pattern, etc.

jsx
export default function SimpleForm() {
  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <div>
        <label htmlFor="email">Email:</label>
        <input 
          type="email" 
          id="email" 
          required 
          placeholder="Enter your email"
        />
      </div>
      
      <div>
        <label htmlFor="password">Password:</label>
        <input 
          type="password" 
          id="password" 
          required 
          minLength={8}
          placeholder="Enter your password (min 8 characters)"
        />
      </div>
      
      <button type="submit">Submit</button>
    </form>
  );
}

While HTML5 validation is simple to implement, it provides limited customization for error messages and validation logic.

Custom Validation with React State

For more control over validation logic and error messages, we can implement custom validation using React state.

jsx
import { useState } from 'react';

export default function CustomValidationForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
  });
  
  const [errors, setErrors] = useState({});
  
  const validateForm = () => {
    let tempErrors = {};
    
    // Email validation
    if (!formData.email) {
      tempErrors.email = 'Email is required';
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      tempErrors.email = 'Email is invalid';
    }
    
    // Password validation
    if (!formData.password) {
      tempErrors.password = 'Password is required';
    } else if (formData.password.length < 8) {
      tempErrors.password = 'Password must be at least 8 characters';
    }
    
    setErrors(tempErrors);
    return Object.keys(tempErrors).length === 0;
  };
  
  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (validateForm()) {
      console.log('Form submitted:', formData);
      // Submit form data to server
    } else {
      console.log('Form has errors');
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email:</label>
        <input 
          type="email" 
          id="email" 
          name="email"
          value={formData.email}
          onChange={handleChange}
          placeholder="Enter your email"
        />
        {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
      </div>
      
      <div>
        <label htmlFor="password">Password:</label>
        <input 
          type="password" 
          id="password" 
          name="password"
          value={formData.password}
          onChange={handleChange}
          placeholder="Enter your password"
        />
        {errors.password && <p style={{ color: 'red' }}>{errors.password}</p>}
      </div>
      
      <button type="submit">Submit</button>
    </form>
  );
}

This approach gives you full control over validation rules and error messages, but it requires more code.

Using Form Libraries

For complex forms, using a validation library can save time and provide better user experiences.

React Hook Form

React Hook Form is a popular and lightweight library for form validation in React applications, including Next.js.

First, install the library:

bash
npm install react-hook-form

Now, let's implement a form with validation using React Hook Form:

jsx
import { useForm } from 'react-hook-form';

export default function HookFormValidation() {
  const { 
    register, 
    handleSubmit, 
    formState: { errors } 
  } = useForm();
  
  const onSubmit = (data) => {
    console.log('Form submitted:', data);
    // Process form data
  };
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="username">Username:</label>
        <input 
          id="username"
          {...register("username", { 
            required: "Username is required",
            minLength: {
              value: 3,
              message: "Username must be at least 3 characters"
            }
          })}
        />
        {errors.username && <p style={{ color: 'red' }}>{errors.username.message}</p>}
      </div>
      
      <div>
        <label htmlFor="email">Email:</label>
        <input 
          id="email"
          {...register("email", { 
            required: "Email is required",
            pattern: {
              value: /\S+@\S+\.\S+/,
              message: "Email is invalid"
            }
          })}
        />
        {errors.email && <p style={{ color: 'red' }}>{errors.email.message}</p>}
      </div>
      
      <div>
        <label htmlFor="password">Password:</label>
        <input 
          type="password"
          id="password"
          {...register("password", { 
            required: "Password is required",
            minLength: {
              value: 8,
              message: "Password must be at least 8 characters"
            }
          })}
        />
        {errors.password && <p style={{ color: 'red' }}>{errors.password.message}</p>}
      </div>
      
      <button type="submit">Submit</button>
    </form>
  );
}

React Hook Form handles much of the boilerplate code for you, including form state management and validation logic, making your code cleaner and more maintainable.

Server-Side Validation with Next.js API Routes

While client-side validation improves user experience, server-side validation is crucial for security. Let's create a simple example using Next.js API routes:

Create a form component that submits to an API route:

jsx
// pages/form-with-server-validation.js
import { useState } from 'react';

export default function FormWithServerValidation() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
  });
  
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitResult, setSubmitResult] = useState('');
  
  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setErrors({});
    
    try {
      const response = await fetch('/api/validate-form', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });
      
      const data = await response.json();
      
      if (!response.ok) {
        setErrors(data.errors || {});
        setSubmitResult('');
      } else {
        setSubmitResult('Form submitted successfully!');
        setErrors({});
      }
    } catch (error) {
      console.error('Submission error:', error);
      setSubmitResult('An error occurred during submission.');
    } finally {
      setIsSubmitting(false);
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username:</label>
        <input 
          type="text" 
          id="username" 
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
        {errors.username && <p style={{ color: 'red' }}>{errors.username}</p>}
      </div>
      
      <div>
        <label htmlFor="email">Email:</label>
        <input 
          type="email" 
          id="email" 
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
      </div>
      
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
      
      {submitResult && <p style={{ color: 'green' }}>{submitResult}</p>}
    </form>
  );
}

Create the API route for validation:

jsx
// pages/api/validate-form.js
export default function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method not allowed' });
  }
  
  const { username, email } = req.body;
  const errors = {};
  
  // Validate username
  if (!username) {
    errors.username = 'Username is required';
  } else if (username.length < 3) {
    errors.username = 'Username must be at least 3 characters';
  }
  
  // Validate email
  if (!email) {
    errors.email = 'Email is required';
  } else if (!/\S+@\S+\.\S+/.test(email)) {
    errors.email = 'Email is invalid';
  }
  
  // Check if we have errors
  if (Object.keys(errors).length > 0) {
    return res.status(400).json({ errors });
  }
  
  // Process valid form data (e.g., save to database)
  
  // Return success response
  return res.status(200).json({ message: 'Form submission successful' });
}

This approach provides an additional layer of security by validating data on the server, even if client-side validation is bypassed.

Real-World Example: Registration Form

Let's create a comprehensive registration form that incorporates both client and server-side validation:

jsx
// components/RegistrationForm.js
import { useState } from 'react';
import { useForm } from 'react-hook-form';

export default function RegistrationForm() {
  const [serverErrors, setServerErrors] = useState(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [registrationSuccess, setRegistrationSuccess] = useState(false);
  
  const { 
    register, 
    handleSubmit, 
    watch,
    formState: { errors } 
  } = useForm();
  
  const password = watch("password");
  
  const onSubmit = async (data) => {
    setIsSubmitting(true);
    setServerErrors(null);
    
    try {
      const response = await fetch('/api/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });
      
      const result = await response.json();
      
      if (!response.ok) {
        setServerErrors(result.errors || { general: result.message });
      } else {
        setRegistrationSuccess(true);
      }
    } catch (error) {
      setServerErrors({ general: 'An unexpected error occurred' });
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };
  
  if (registrationSuccess) {
    return (
      <div className="success-message">
        <h2>Registration Successful!</h2>
        <p>Your account has been created successfully. You can now log in.</p>
      </div>
    );
  }
  
  return (
    <div className="registration-form">
      <h1>Create an Account</h1>
      
      {serverErrors?.general && (
        <div className="error-banner">{serverErrors.general}</div>
      )}
      
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="form-group">
          <label htmlFor="fullName">Full Name</label>
          <input
            id="fullName"
            type="text"
            {...register("fullName", {
              required: "Full name is required",
              minLength: {
                value: 2,
                message: "Full name must be at least 2 characters"
              }
            })}
          />
          {errors.fullName && <span className="error">{errors.fullName.message}</span>}
          {serverErrors?.fullName && <span className="error">{serverErrors.fullName}</span>}
        </div>
        
        <div className="form-group">
          <label htmlFor="email">Email</label>
          <input
            id="email"
            type="email"
            {...register("email", {
              required: "Email is required",
              pattern: {
                value: /\S+@\S+\.\S+/,
                message: "Please enter a valid email address"
              }
            })}
          />
          {errors.email && <span className="error">{errors.email.message}</span>}
          {serverErrors?.email && <span className="error">{serverErrors.email}</span>}
        </div>
        
        <div className="form-group">
          <label htmlFor="username">Username</label>
          <input
            id="username"
            type="text"
            {...register("username", {
              required: "Username is required",
              minLength: {
                value: 3,
                message: "Username must be at least 3 characters"
              },
              pattern: {
                value: /^[a-zA-Z0-9_]+$/,
                message: "Username can only contain letters, numbers, and underscores"
              }
            })}
          />
          {errors.username && <span className="error">{errors.username.message}</span>}
          {serverErrors?.username && <span className="error">{serverErrors.username}</span>}
        </div>
        
        <div className="form-group">
          <label htmlFor="password">Password</label>
          <input
            id="password"
            type="password"
            {...register("password", {
              required: "Password is required",
              minLength: {
                value: 8,
                message: "Password must be at least 8 characters"
              },
              pattern: {
                value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
                message: "Password must contain at least one uppercase letter, one lowercase letter, one number and one special character"
              }
            })}
          />
          {errors.password && <span className="error">{errors.password.message}</span>}
        </div>
        
        <div className="form-group">
          <label htmlFor="confirmPassword">Confirm Password</label>
          <input
            id="confirmPassword"
            type="password"
            {...register("confirmPassword", {
              required: "Please confirm your password",
              validate: value => value === password || "Passwords do not match"
            })}
          />
          {errors.confirmPassword && <span className="error">{errors.confirmPassword.message}</span>}
        </div>
        
        <div className="form-group">
          <label>
            <input
              type="checkbox"
              {...register("termsAccepted", {
                required: "You must accept the terms and conditions"
              })}
            />
            I accept the terms and conditions
          </label>
          {errors.termsAccepted && <span className="error">{errors.termsAccepted.message}</span>}
        </div>
        
        <button type="submit" disabled={isSubmitting}>
          {isSubmitting ? "Creating Account..." : "Register"}
        </button>
      </form>
    </div>
  );
}

The corresponding API route:

jsx
// pages/api/register.js
export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method not allowed' });
  }
  
  const { fullName, email, username, password, termsAccepted } = req.body;
  const errors = {};
  
  // Server-side validation
  if (!fullName || fullName.length < 2) {
    errors.fullName = 'Valid full name is required';
  }
  
  if (!email || !/\S+@\S+\.\S+/.test(email)) {
    errors.email = 'Valid email is required';
  } else {
    // Check if email is already in use (pseudo-code)
    // const emailExists = await checkIfEmailExists(email);
    const emailExists = email === '[email protected]'; // Demo purpose
    if (emailExists) {
      errors.email = 'Email is already registered';
    }
  }
  
  if (!username || username.length < 3 || !/^[a-zA-Z0-9_]+$/.test(username)) {
    errors.username = 'Valid username is required';
  } else {
    // Check if username is already taken (pseudo-code)
    // const usernameExists = await checkIfUsernameExists(username);
    const usernameExists = username === 'admin'; // Demo purpose
    if (usernameExists) {
      errors.username = 'Username is already taken';
    }
  }
  
  // Check if we have errors
  if (Object.keys(errors).length > 0) {
    return res.status(400).json({ errors });
  }
  
  try {
    // In a real application, you would:
    // 1. Hash the password
    // 2. Store user data in database
    // 3. Send confirmation email
    // 4. Create user session, etc.
    
    // For demo purposes, we'll just simulate successful registration
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate processing
    
    return res.status(200).json({ message: 'Registration successful' });
  } catch (error) {
    console.error('Registration error:', error);
    return res.status(500).json({ message: 'Server error during registration' });
  }
}

This comprehensive example demonstrates:

Client-side validation with React Hook Form
Server-side validation with Next.js API routes
Password confirmation matching
Error handling for both client and server errors
Loading states during submission
Success state after form completion

Validation Strategies

Here are some best practices for form validation in Next.js:

Progressive Enhancement:
- Start with HTML5 validation for basic protection
- Add client-side JavaScript validation for better UX
- Always validate on the server for security
Real-time Validation:
- Validate fields as users type or when they lose focus
- Provide immediate feedback on errors
Clear Error Messages:
- Use specific, actionable error messages
- Display errors close to the relevant field
Accessibility:
- Use ARIA attributes to announce errors to screen readers
- Ensure keyboard navigation works properly
- Maintain sufficient color contrast for error messages

Summary

Form validation in Next.js involves multiple layers:

HTML5 validation: Simple but limited
Client-side validation: Better user experience with libraries like React Hook Form
Server-side validation: Essential for security and data integrity

By combining these approaches, you can create forms that are both user-friendly and secure. Remember that client-side validation is for user experience, while server-side validation is for security.

Additional Resources

Exercises

Create a login form with email and password validation
Add validation to a multi-step form with different validation rules for each step
Implement a form with dynamic validation rules that change based on user input
Create a form with file upload validation (size, type, etc.)
Build a form that validates input against an API (e.g., checking if a username is available)

By practicing these exercises, you'll gain confidence in implementing form validation in your Next.js applications!

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)

Introduction to Form Validation​

Why Form Validation Matters​

Basic Client-Side Validation​

HTML5 Form Validation​

Custom Validation with React State​

Using Form Libraries​

React Hook Form​

Server-Side Validation with Next.js API Routes​

Real-World Example: Registration Form​

Validation Strategies​

Summary​

Additional Resources​

Exercises​