minLength doesn't work in typescript, react

Question

I have an input in Next, typescript. Maxlength does work but minlength doesn't work now. Does anyone how to validate this both?

Here's my code.

<input type="text" placeholder="text" required={true} minLength={2} maxLength={10} />
<button type="submit">Submit</button>

Answer 1

Your code is fine. However minlength works different than maxlength.

• HTML maxlength prevents the user from typing keys more than the maxlength.
• HTML minlength will let the user enter less keys compared to the requirement. After all, they need to be able to start from less chars to come up to more chars. That said the field will show an error if minlenght is not met.

Complete example

Use this component and press the enter key to play around with the input field:

export default function App() {
  return (
  <form>
    <input type="text" placeholder="text" required={true} minLength={2} maxLength={10} />
    <button type="submit">Submit</button>
  </form>
  );
}

Screenshots

Because its required:

Because minlenght is not met:

Answer 2

use can install Material ui Libraries npm install @material-ui/core Material ui Libraries

There have lots of components. use Textfield components .
Using inputProps we set maxlength in textfield

<TextField inputProps={{ maxLength: 10 }} type="text" />

Material Ui Textfied Compoents