Open
Description
Describe the bug
When using an input of type number
, adding validation rules isMaxNumber
or isMinNumber
won't trigger validation error when the value is not a number.
Code
const MyField = (props) => {
const { value, setValue, isValid, errorMessage } = useField(props);
const handleChange = (e) => {
setValue(e.target.value);
};
return (
<>
<input type="number" value={value} onChange={handleChange} />
{!isValid && { errorMessage }}
</>
);
};
const Demo = () => {
const form = useForm();
return (
<Formiz autoForm connect={form} onValidSubmit={console.log}>
<MyField
name="number"
validations={[
{ rule: isMinNumber(0), message: 'Too low' },
{ rule: isMaxNumber(100), message: 'Too high' },
]}
/>
<button onClick={() => form.submit}>Submit</button>
</Formiz>
);
};
Expected behavior
A validation error should trigger when not number values are used in the field.
Version
- OS: Linux
- Browser: Mozilla Firefox 90.0
Additional context
- The bug won't happen in Chrome because inputs of type
number
are controlled by the browser to prevent bad values in the field. - In Firefox, the values are controlled when submitted. If the value of the field is not a number, the validation will pass, but the value returned by the form will be null.
- In Firefox, if the value is a valid number, but too high or too low, the validation will trigger.
Activity
ivan-dalmet commentedon Jul 19, 2021
@Rileran You need to use the isNumber() validation to check if the value is number or not 😉Rileran commentedon Jul 19, 2021
Then there is a problem within the documentation.
Sending a PR to fix the doc !
ivan-dalmet commentedon Jul 19, 2021
@Rileran Wait, I answered too fast 😔
The documentation is right, and it should not be valid. I see the issue on Firefox, the value is not set if it's not a number.
ivan-dalmet commentedon Jul 19, 2021
You can fix this issue by replacing
type="number"
bytype="tel"
. It will work the same for mobile keyboards and it will work as expected in firefox.