React Controlled Input Validation

Question

I noticed a weird behavior where controlled components are not respecting the minLength and allowing a form to submit even though that condition is not met.

Validation works fine for uncontrolled components.

What is the reason for this behavior?

export default function App() {
  const [uncontrolledSubmitCount, setUncontrolledSubmitCount] = useState(0);
  const [controlledSubmitCount, setControlledSubmitCount] = useState(0);

  const [content, setContent] = useState("");
  return (
    <div className="App">
      <h2>Uncontrolled (minLength: 10)</h2>
      <form
        onSubmit={(e) => {
          console.log(e);
          e.preventDefault();
          setUncontrolledSubmitCount(uncontrolledSubmitCount + 1);
        }}
      >
        <textarea
          type="text"
          minLength={10}
          maxLength={30}
          required
        />
        <br />
        <button type="submit">Submit</button>
        <br />
        <span>Submit Count: {uncontrolledSubmitCount}</span>
      </form>

      <h2>Controlled (minLength: 10)</h2>
      <form
        onSubmit={(e) => {
          console.log(e);
          e.preventDefault();
          setControlledSubmitCount(controlledSubmitCount + 1);
        }}
      >
        <textarea
          type="text"
          minLength={10}
          maxLength={30}
          required
          value={content}
          onChange={(e) => setContent(e.currentTarget.value)}
        />
        <br />
        <button type="submit">Submit</button>
      </form>

      <span>Submit Count: {controlledSubmitCount}</span>
    </div>
  );
}

Here's a reproduction link: https://codesandbox.io/s/kind-violet-zwcct?file=/src/App.js

I can't reproduce this using your sandbox. There is no console log and no submit counter increase for the controlled component when the input length is under 10. — lawrence-witt
– lawrence-witt, Commented Aug 24, 2021 at 23:44
Seems to be a Chrome bug: Chrome 93.0.4577.51 - Error message if controlled component is empty, but minLength not honored otherwise /// Safari 14.1.1 (16611.2.7.1.4) - works fine /// Firefox 91.0.2 - works fine — digitalbreed
– digitalbreed, Commented Aug 24, 2021 at 23:54
This is strange. As @digitalbreed said this is Chrome problem definitely. — Mario Petrovic
– Mario Petrovic, Commented Aug 25, 2021 at 0:04

Mario Petrovic · Accepted Answer · 2021-08-25 00:32:46Z

1

This behavior happens only on Chrome as far as I tested it.

Based on React official documentation adding value to textarea it overrides HTML validations and it makes it "controlled" input and it ignores it overall. But only in Chrome.

The documentation also says there is an option to use defaultValue. I tried it at it works.

<textarea
  minLength={10}
  maxLength={30}
  required
  defaultValue=""
  onChange={(e) => setContent(e.currentTarget.value)}
/>

Working example from your codesanbox
With this solution you will solve Chrome problem but still keep content state with value that you enter inside textarea

NOTE:
If you try to use children value, React will throw an error that it is not supported for controlled textarea

edited Aug 25, 2021 at 0:32

answered Aug 25, 2021 at 0:17

Mario Petrovic

8,44516 gold badges45 silver badges66 bronze badges

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

Collectives™ on Stack Overflow

React Controlled Input Validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related