Nextjs Managing Form State And Validation Complete Guide

Next.js Managing Form State and Validation

Introduction

Managing Form State with React Hooks

1. useState Hook: The useState hook is the most basic way to manage form state in Next.js. It allows you to keep track of input values and update them based on user interactions.

import { useState } from 'react';

function MyForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission logic here
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

This example demonstrates managing email and password fields using useState. Each input field holds its own state variable (email and password), which is updated through the respective onChange handlers.

2. useReducer Hook: For more complex forms that involve multiple state transformations and transitions, useReducer can be a better option. It helps maintain cleaner and more scalable code.

import { useReducer } from 'react';

const initialState = {
  email: '',
  password: '',
};

function reducer(state, action) {
  switch (action.type) {
    case 'CHANGE_EMAIL':
      return { ...state, email: action.payload };
    case 'CHANGE_PASSWORD':
      return { ...state, password: action.payload };
    default:
      return state;
  }
}

function MyForm() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission logic here
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Email:</label>
        <input
          type="email"
          value={state.email}
          onChange={(e) =>
            dispatch({ type: 'CHANGE_EMAIL', payload: e.target.value })
          }
        />
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          value={state.password}
          onChange={(e) =>
            dispatch({ type: 'CHANGE_PASSWORD', payload: e.target.value })
          }
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

This code snippet manages the same form fields but uses useReducer for state management. The reducer function defines actions to update the state, making it easier to manage changes and handle more intricate state updates.

Integrating External Libraries

While the above methods are suitable for simple scenarios, real-world applications often require more advanced functionalities like form validation, asynchronous data fetching, and controlled/uncontrolled inputs. For this purpose, integrating external libraries can greatly simplify the process.

Formik: Formik is a popular library that assists in building forms in React by helping manage form state, errors, and submission status. Here’s an example:

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  email: Yup.string()
    .email('Invalid email address')
    .required('Email is required'),
  password: Yup.string()
    .min(8, 'Password must be at least 8 characters')
    .max(50, 'Password must be no longer than 50 characters')
    .required('Password is required'),
});

function MyForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={SignupSchema}
      onSubmit={(values) => {
        console.log(values);
        // Handle form submission here
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <div>
            <label htmlFor="email">Email:</label>
            <Field name="email" type="email" />
            {errors.email && touched.email ? <ErrorMessage name="email" /> : null}
          </div>

          <div>
            <label htmlFor="password">Password:</label>
            <Field name="password" type="password" />
            {errors.password && touched.password ? (
              <ErrorMessage name="password" />
            ) : null}
          </div>

          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

export default MyForm;

• Formik: Manages form state and events.
• Yup: Used to define schema and validations.
• Field: Controlled input component.
• ErrorMessage: Displays validation errors.

This setup allows you to validate form inputs seamlessly using Yup schemas, and any validation errors are handled directly by Formik.

React Hook Form:

Another efficient library to consider is React Hook Form, especially when dealing with large forms or performance-critical scenarios.

import { useForm, Controller } from 'react-hook-form';
import { TextField, Button, Grid } from '@mui/material';

const MyForm = () => {
  const { register, handleSubmit, control, formState: { errors } } = useForm({
    defaultValues: {
      email: '',
      password: '',
    },
    mode: 'onBlur',
    resolver: yupResolver(SignupSchema),
  });

  const onSubmit = (data) => {
    console.log(data);
    // Handle form submission here
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Controller
            name="email"
            control={control}
            rules={{ required: true }}
            render={({ field }) => <TextField {...field} label="Email" variant="outlined" />}
          />
          {errors.email && <p>{errors.email.message}</p>}
        </Grid>
        <Grid item xs={12}>
          <Controller
            name="password"
            control={control}
            rules={{ required: true }}
            render={({ field }) => <TextField {...field} label="Password" variant="outlined" type="password" />}
          />
          {errors.password && <p>{errors.password.message}</p>}
        </Grid>
      </Grid>
      <Button type="submit">Submit</Button>
    </form>
  );
};

export default MyForm;

• useForm: Initializes all form functionalities.
• Controller: Manages uncontrolled components effectively.
• yupResolver: Integrates Yup schema for validation.
• handleSubmit: Handles form submission with validated data or error objects.

React Hook Form avoids re-renders and leverages native browser form validations, making it performant for large forms.

Custom Validations

Sometimes, you might need custom validation logic that goes beyond common validators provided by libraries like Yup and React Hook Form. Here’s how to add custom validations.

Custom Validation Using Formik:

import { Formik, Form, Field, ErrorMessage } from 'formik';

function MyForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validate={(values) => {
        const errors = {};
        if (!values.email) {
          errors.email = 'Email is required';
        } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
          errors.email = 'Invalid email address';
        }

        if (!values.password) {
          errors.password = 'Password is required';
        } else if (values.password.length < 8) {
          errors.password = 'Password must be at least 8 characters long';
        }

        return errors;
      }}
      onSubmit={(values) => {
        // Handle form submission logic here
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <div>
            <label htmlFor="email">Email:</label>
            <Field name="email" type="email" />
            {errors.email && touched.email ? <ErrorMessage name="email" /> : null}
          </div>

          <div>
            <label htmlFor="password">Password:</label>
            <Field name="password" type="password" />
            {errors.password && touched.password ? (
              <ErrorMessage name="password" />
            ) : null}
          </div>

          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

export default MyForm;

In this example, custom validation functions are provided directly within Formik's validate prop. This approach offers fine-grained control over each validation step.

Summary

Managing form state and validation in Next.js can be approached using built-in React hooks such as useState and useReducer, or by integrating specialized libraries like Formik and React Hook Form. These solutions offer flexibility and scalability based on your application's needs. For custom validations, extending the validate functionality in Formik or similar approaches allows tailored checks according to your requirements.