No validation for inputs of type number in firefox

[Rileran]

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.

[ivan-dalmet]

@Rileran You need to use the isNumber() validation to check if the value is number or not 😉

[Rileran]

Then there is a problem within the documentation.

isMinNumber(min)
Tests if the value is a number and above a min value.

Sending a PR to fix the doc !

[ivan-dalmet]

@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]

You can fix this issue by replacing type="number" by type="tel". It will work the same for mobile keyboards and it will work as expected in firefox.