React MUI 5 Form Validation with react-hook-form

In this tutorial, we’ll see form validation in React Material UI 5 with the help of react-hook-form. Ensure you have React MUI 5 and react-hook-form installed and configured before getting started.

React MUI 5 Form Validation With React Hook Form

1. Create Simple Validation in React MUI 5 Using useForm and Controller from react-hook-form.

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

export default function App() {
  const { control, handleSubmit, formState: { errors } } = useForm();


  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} style={{margin:"400px"}}>
      <Controller
        name="myField"
        control={control}
        defaultValue=""
        rules={{ required: true }}
        render={({ field }) => (
          <TextField
            {...field}
            label="My Field"
            variant="outlined"
            size="small"
            error={!!errors.myField}
            helperText={errors.myField ? "This field is required" : null}
          />
        )}
      />
      <Button type="submit" variant="contained">Submit</Button>
    </form>
  );
};

2. React MUI 5 Form Validation Using react-hook-form and TypeScript.

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

interface FormValues {
  myField: string;
}

export default function App() {
  const { control, handleSubmit, formState: { errors } } = useForm<FormValues>();

  const onSubmit: SubmitHandler<FormValues> = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="myField"
        control={control}
        defaultValue=""
        rules={{ required: true }}
        render={({ field }) => (
          <TextField
            {...field}
            label="My Field"
            variant="outlined"
            size="small"
            error={!!errors.myField}
            helperText={errors.myField ? "This field is required" : null}
          />
        )}
      />
      <Button type="submit" variant="contained">Submit</Button>
    </form>
  );
}

3. Build a Login Form with Validation in React MUI 5 Using useForm and Controller from react-hook-form.

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

const App = () => {
  const { control, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <Container maxWidth="sm">
      <Typography variant="h4" align="center" marginY={2}>Login Form</Typography>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="email"
          control={control}
          defaultValue=""
          rules={{
            required: 'Email is required',
            pattern: {
              value: /^\S+@\S+$/i,
              message: 'Invalid email format'
            }
          }}
          render={({ field }) => (
            <TextField
              {...field}
              label="Email"
              variant="outlined"
              margin="normal"
              fullWidth
              error={!!errors.email}
              helperText={errors.email?.message}
            />
          )}
        />
        <Controller
          name="password"
          control={control}
          defaultValue=""
          rules={{
            required: 'Password is required',
            minLength: {
              value: 6,
              message: 'Password must be at least 6 characters'
            }
          }}
          render={({ field }) => (
            <TextField
              {...field}
              label="Password"
              type="password"
              variant="outlined"
              margin="normal"
              fullWidth
              error={!!errors.password}
              helperText={errors.password?.message}
            />
          )}
        />
        <Button type="submit" variant="contained" color="primary" fullWidth>
          Login
        </Button>
      </form>
    </Container>
  );
};

export default App;

React MUI 5 Form Validation With React Hook Form

Aaronn