CODEWITHSUNDEEP
javascriptreactjsformsecmascript-6material-ui
mcmwhfy
mcmwhfy

Reputation: 1686

React material UI form validation using error and helperText

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 enter image description here 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>
  );

Upvotes: 3

Views: 10038

Answers (1)

Dekel
Dekel

Reputation: 62546

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

Upvotes: 6

Related Questions