如何在reactjs中的材料ui TextField中进行错误验证？

Question

I'm using material ui TextField in my react application. I need to know how to use error and helper text validation for my below code which carry email and password?. Please go through the code given below and provide me a suitable solution.

function LoginPage() {
  const handleSubmit1 = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log({
      email: data.get("email"),
      password: data.get("password"),
      remember: data.get("remember"),
    });
  };

return (
    <Box
      component="form"
      onSubmit={handleSubmit1}
      noValidate
      autoComplete="off"
      sx={{ mt: 1 }}
    >
      <FormControl sx={{ width: "60ch" }}>
        <CssTextField
          type="email"
          id="email"
          name="email"
          label="Username or email"
          variant="standard"
          fullWidth
          required
          autoComplete="off"
        />
        <CssTextField
          name="password"
          label="Password"
          type="password"
          id="password"
          autoComplete="off"
          variant="standard"
          fullWidth
          Validators
          required
        />
      </FormControl>
      <Stack direction="row" spacing={2}>
        <Button variant="contained" size="medium">
          LOGIN
        </Button>
      </Stack>
    </Box>
  );
}

Answer 1

I am not quite sure what exact problem you want to solve, can you elaborate a little more in details please.

I suppose you want to validate the input in some way and show error messages according to the validation state or just simply send the login request to your authentication service. If my assumption is correct, you may want to make use of existing libraries, which will handle that for you - one of those is: mui-validate It will handle client side validation before sending any request to a server.

Or do you actually want to display the result of an async server response?

After understanding your actual challenge better I am sure we can provide you with a good code example.

Answer 2

Try exploring this https://mui.com/material-ui/api/text-field/ here you have a list of all APIs MUI text-field supports if you are still not able to capture your scenario then try this https://mui.com/material-ui/react-text-field/ here you have demos of all possible text field scenarios with error ones as well, Try exploring the library documentation first as it will increase your knowledge and a better understanding of MUI package. I hope with this one you can manage your case by yourself.