How to validate textfield based on input of other textfield in React Material Ui?

Question

I am using material ui textfield. I ran into problem where I Want to write a code where one textfield is dependent on other. Like if in textfield one i enter no 4, then number in textfield two should always be greater than 4.That means textfield two depends on textfield one. Please see code in code sandbox. https://codesandbox.io/s/textfield-with-outline-color-forked-8oj2z

       <TextField
          id="outlined-email-input"
          label="Email"
          className={classes.textField}
          type="number"
          defaultValue="0"
          name="email"
          autoComplete="email"
          margin="normal"
          variant="outlined"
        />

Answer 1

Material UI Textfields have an error prop you can use. Than declare the error in your state as false. In your onChange function add a condition.

const OutlinedTextFields = () => {
  const [inputValue, setInputValue] = useState('');
  const [error, setError] = useState(false)
  const handleInput = (val) => {
    if (!val) {
      return 0;
    }
    if (val <= inputValue) {
      return setError(true);
    } else {
      setError(false);
      return val;
    }
  };
  return (
    <form noValidate autoComplete="off">
      <TextField
        ...
        onChange={(e) => setInputValue(e.target.value)}
      />
      <TextField
        ...
        error={error}
        helperText={error && `Number must be greater than ${inputValue}`}
        onChange={(e) => handleInput(e.target.value)}
      />
    </form>
  );
};

Answer 2

You can declare the states for storing the values of text1 and text2, and compare them for validation.

Following is the example along with codesandbox link.

Output:

class OutlinedTextFields extends React.Component {
  state = {
    txt1: 0,
    txt2: 0
  };


  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="outlined-email-input"
          label="Text1"
          className={classes.textField}
          type="number"
          defaultValue={this.state.txt1}
          onChange={(event) => {
            this.setState({
              txt1: parseInt(event.target.value)
            });
          }}
          margin="normal"
          variant="outlined"
        />
        <TextField
          id="outlined-password-input"
          label={
            this.state.txt1 >= this.state.txt2
              ? "Text2 should be greater than Text1"
              : "Text2"
          }
          className={classes.textField}
          type="number"
          error={this.state.txt1 >= this.state.txt2}
          defaultValue={this.state.txt2}
          onChange={(event) => {
            this.setState({
              txt2: parseInt(event.target.value)
            });
          }}
          name="password"
          margin="normal"
          variant="outlined"
        />
        <Button
          margin="normal"
          variant="outlined"
          disabled={
            this.state.txt1 >= this.state.txt2 ||
            !this.state.txt1 ||
            !this.state.txt2
          }
        >
          Submit
        </Button>
      </form>
    );
  }
}

Codesandbox Link

Answer 3

one of the possible way to address this: Btw: it's just a draft with an idea, u can improve it as much as posible.

const OutlinedTextFields = () => {
  const [inpValue, setInputValue] = useState();
  const handleInputVal = (val) => {
    if (!val) {
      return 0;
    }
    if (Number(val) !== 4) {
      return Number(val) + 1;
    } else {
      return val;
    }
  };
  return (
    <form noValidate autoComplete="off">
      <TextField
        id="outlined-email-input"
        label="Email"
        type="number"
        defaultValue="0"
        name="email"
        autoComplete="email"
        margin="normal"
        variant="outlined"
        onChange={(e) => setInputValue(e.target.value)}
      />
      <TextField
        id="outlined-password-input"
        label="Password"
        type="number"
        defaultValue="0"
        name="password"
        autoComplete="current-password"
        margin="normal"
        variant="outlined"
        value={handleInputVal(inpValue)}
      />
    </form>
  );
};