javascript - react-hook-form Why does number input type ignore maxLength? - Stack Overflow

admin管理员组

文章数量:1323342

I'm using react-hook-form to create an input with 4 digits, that won't let the user type in a letter or character, but it is ignoring the maxLength value. I'm able to get an input allowing numbers only, but I'm not able to restrict the length.

Here is my input:

     <input
          id="fourNumbers"
          required
          type="number"
          name="fourNumbers"
          ref={register({ required: true, pattern: /[0-9]{4}/ })}
          placeholder="0000"
          maxLength="4"
          minLength="4"
        />

I'm using react-hook-form to create an input with 4 digits, that won't let the user type in a letter or character, but it is ignoring the maxLength value. I'm able to get an input allowing numbers only, but I'm not able to restrict the length.

Here is my input:

     <input
          id="fourNumbers"
          required
          type="number"
          name="fourNumbers"
          ref={register({ required: true, pattern: /[0-9]{4}/ })}
          placeholder="0000"
          maxLength="4"
          minLength="4"
        />

• javascript
• reactjs
• forms
• react-hook-form

Share Improve this question Follow asked May 3, 2021 at 21:07 avocodooavocodoo 5711 gold badge33 silver badges1515 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

I have a simple solution for this:

<input 
   onInput={(e) => {
   if (e.target.value.length > e.target.maxLength)
   e.target.value = e.target.value.slice(0,e.target.maxLength);
}}
    type = "number"
    maxLength = {6}
 />

hey in my case i had same problem like you, change your type number to type tel , i dont know why react-hook-form seem like ignore type number only but type like text, tel , etc not ignored maxLength/minLength

<input type="number" maxLength={10} />

to

<input type="tel" maxLength={10} />

In addition to the maxLength thing and you want to limit the user to only be able to include numerical values, you can also chuck the input ponent into a controlled ponent and have a on change handler as follows:

onChange={(e: any) => onChange(e.target.value.replace(/\D/g, ""))}

Taken from https://stackoverflow./a/9555196/1772933

Use the max attribute for inputs of type="number". It will specify the highest possible number that you may insert

  <input type="number" max="9999" />

if you add both a max and a min value you can specify the range of allowed values:

  <input type="number" min="1000" max="9999" />

try to use it inside register like this:

<input 
     ref={register({ required: true, pattern: /[0-9]{4}/, minLength: 4, 
                                                     maxLength: 4 })}
/>

and the maybe display the error.

The prop does not appear to be documented, but you can enable the passing of native validation props to input elements by using the progressive: true flag on useForm.

If it was just validation it should say maxLength the input is validated or something like that.

Validation is only performed based on the mode prop, which defaults to onSubmit. This means that your expected validation error would occur on form submission. If you require validation to occur onChange, consider using mode: "onChange".

const { register, reset, handleSubmit, formState: {isValid, errors} } = useForm<MyForm>({ mode: "onChange", progressive: true});

本文标签： javascriptreacthookform Why does number input type ignore maxLengthStack Overflow