Skip to content

No validation for inputs of type number in firefox #78

Open
@Rileran

Description

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

Activity

ivan-dalmet

ivan-dalmet commented on Jul 19, 2021

@ivan-dalmet
Member

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

Rileran

Rileran commented on Jul 19, 2021

@Rileran
Author

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

ivan-dalmet commented on Jul 19, 2021

@ivan-dalmet
Member

@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

ivan-dalmet commented on Jul 19, 2021

@ivan-dalmet
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ivan-dalmet@Rileran

        Issue actions

          No validation for inputs of type number in firefox · Issue #78 · BearStudio/formiz