How to display Mui TextField validation error in Next.js

In this tutorial, we are going to explain how to toggle texfield with the error state, which means surround textfield with red borders to tell the users that it has typed a wrong data in that texfield

This tutorial can be used in a React based app like Next.js

We are going to continue on the same sample used on textfield email validation, you can check it on this link for package installation, or simply follow this tutorial

Material UI (MUI) textfield validation error

Meterial UI (MUI) Textfield validation error prop is used to toggle error state on the texfield.

This state changes the texfield borders to red, and it is possible to show a helpertext to give the user a hint on what it is going wrong

Now, to set the validation error on textfield:

• Use the prop error on Textfield like this:

<Textfield error={boolean} />

• Add helperText to give the user a hint about the error, the syntax is:

<Textfield error={boolean} helperText={'hint for user'}/>

error prop is a boolean, which can takes an expression that returns a boolean.

helperText is used to display messages.

MUI textfield validation error example

Now let's see how we can use the error prop on a sample with a helper text

Create pages/test.js and copy the following code

import { Button, TextField } from "@mui/material";
import { useState } from "react";
import isEmail from "validator/lib/isEmail";

export default function Test() {
  const [email, setEmail] = useState('');

  return (
    <form className="p-2 flex flex-col w-1/3">
      {" "}
      <TextField
        id="someId"
        label="Email"
        onChange={(e) => setEmail(e.target.value)}
        error={!isEmail(email)}
        helperText={!isEmail(email) ? 'Email is not valid':''}
      />
      <Button
        size="large"
        variant="contained"
        style={{backgroundColor: "black"}}
        
        onClick={() =>
          isEmail(email) ? alert("email is valid") : alert("email is not valid")
        }
      >
        Submit
      </Button>
    </form>
  );
}

error prop is taking the isEmail function as prop, this function returns true if email is valid, false otherwise

helpertext is showed only when the user has not successfully typed in correct email address

The inline css used is tailwindcss, you can also use your own classes or use these classes after installing tailwindcss, this article will help you install it

Test validation

Now when you run localhost:3000/test and type in a.b@c.c for example, you should see the textfield surrounded with red borders, and the helper text is displayed

You can try it live as well with a correct email address and see the results

Conclusion

We have seen how to validate a mui textfield validation error.

If you like to work with mui, check also this article which will help you better understand mui, with samples on how to use buttons, texfields and customize them.