0

Hello I need to change the event.target.value with an input and that input has 8 character min rule. I'm currently doing like this(example) in a component react js:

              <input
              ...
              minLength={8}
              onChange={(e) => {
                onChangeHandler(e);
              }}

          />

Where in the onChangeHandler i'm doing this

e.target.value = 'less8';
console.log(e.target.checkValidity());

However when i call checkValidity it's returning 'true', but i was expecting 'false'.

I debugged this and it's because when i assigned a value into 'e.target.value' the function 'e.target.checkValidity()' does not work anymore.

Does anyone have another way to assign a value to 'e.target.value' and still make 'checkValidity()' work?

Bobby
  • 243
  • 4
  • 13
  • Ah ok thanks! It looks like there's another attribute I can use called 'pattern' which works! It's strange that 'minLength' does not work when using JS to simulate user interaction – Bobby Mar 13 '22 at 18:56
  • Problem is I have many components that uses 'minLength', I would have to go through each one and change it to 'pattern' attribute :-( – Bobby Mar 13 '22 at 19:05

0 Answers0