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.
Describe the bug
When using an input of type
number, adding validation rulesisMaxNumberorisMinNumberwon't trigger validation error when the value is not a number.Code
Expected behavior
A validation error should trigger when not number values are used in the field.
Version
Additional context
numberare controlled by the browser to prevent bad values in the field.