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"
/>
Share
Improve this question
asked May 3, 2021 at 21:07
avocodooavocodoo
571 gold badge3 silver badges15 bronze badges
6 Answers
Reset to default 2I 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
版权声明:本文标题:javascript - react-hook-form Why does number input type ignore maxLength? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742134130a2422294.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论