React material UI form validation using error and helperText

Question

I have created a form on which I want to validate the inputs and I saw the material UI have an attribute called error boleean and another attribute called helperText for TextField input of the form but I didn't found nothing about how to inject that error on element when the validation conditon is not fulfiled here is my code example: https://codesandbox.io/s/material-demo-hip84?file=/demo.js:1020-1055

const [form, setForm] = useState({ name: "", email: "", remember: "" });

  const onChange = i => {
    setForm({ ...form, [i.target.name]: i.target.value });
  };

  const handleSubmit = e => {
    e.preventDefault();
    console.log(form);
    e.target.reset();
  };

  return (
    <form className={classes.root} autoComplete="off" onSubmit={handleSubmit}>
      <Grid container spacing={4}>
        {Object.keys(form).map((objKey, idx) => {
          return (
            <Grid item xs={12} sm={6} md={4} key={idx}>
              <TextField
                error
                helperText="No Value added in this field"
                id={`input${idx}`}
                label={objKey}
                name={objKey}
                fullWidth={true}
                onChange={onChange}
              />
            </Grid>
          );
        })}
        <Grid item xs={12} sm={12} md={12}>
          <Button type="submit" variant="contained" color="primary">
            Submit
          </Button>
        </Grid>
      </Grid>
    </form>
  );

JulDan · Accepted Answer · 2024-10-23 19:35:34Z

6

To use the error prop of the TextField you will need to manage the errors on your own (just like you manage the value for your fields).

To do that - the value of error should not be fixed, but should be true/false, based on some calculation that you are doing.

I used your code to do the checking if the value (for each field) equals specific value. This is not a real-life example, and you probably want to change this to some kind of a regex check, but this should give you a good starting point:

export default function SubmitForm() {
  const classes = useStyles();
  const [form, setForm] = useState({ name: "aaa", email: "bbb", remember: "ccc" });
  const isValidData = {name: "aaa", email: "bbb", remember: "ccc"};

  ...

  const checkIsValid = (fieldName, value) => {
    // Here you probably what to check this to some regex validation
    return isValidData[fieldName] === value;
  }
  
  return (
        ...
        {Object.keys(form).map((objKey, idx) => {
          return (
            <Grid item xs={12} sm={6} md={4} key={idx}>
              <TextField
                error={!checkIsValid(objKey, form[objKey])}
                ...
              />
            </Grid>
          );
        })}
  );
}

To see the complete working example please check this: https://codesandbox.io/s/mui-textfield-control-errors-z0tfo?file=/demo.js

edited Oct 23, 2024 at 19:35

JulDan

33 bronze badges

answered Apr 23, 2020 at 7:28

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mcmwhfy Over a year ago

that is cool, thank you. And if I want to validate forms elements onSubmit form I guess I need to call "checkIsValid" on submit form button, right ?

Dekel Over a year ago

Yes, thats correct :) I gave you an example of "live validation". You could change this to happen only "on submit". Keep in mind that if you do this only "on submit" you will probably need to have another variable that will save the value of the validation status for each field.

Collectives™ on Stack Overflow

React material UI form validation using error and helperText

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related