I'm trying to set up a phone number input in react-hook-form library. I set input type to number, but it still accepts "e" and "-" chars. I tried to prevent it like this:

<Controller
  name="phone"
  control={control}
  rules={{ required: true }}
  render={({ onChange, value, ref }) => (
    <Input
      ref={ref}
      type="number"
      label="phone"
      onChange={(e) =>
        /[^e]/.test(e.target.value) && onChange(e.target.value)
      }
      val={value}
    />

But it doesn't work properly. Any remendations how to solve this problem?

I'm trying to set up a phone number input in react-hook-form library. I set input type to number, but it still accepts "e" and "-" chars. I tried to prevent it like this:

<Controller
  name="phone"
  control={control}
  rules={{ required: true }}
  render={({ onChange, value, ref }) => (
    <Input
      ref={ref}
      type="number"
      label="phone"
      onChange={(e) =>
        /[^e]/.test(e.target.value) && onChange(e.target.value)
      }
      val={value}
    />

But it doesn't work properly. Any remendations how to solve this problem?

• javascript
• reactjs
• validation
• react-hook-form

• "I'm trying to set up a phone number input" -- so why aren't you using <input type="tel" /> which is intended for exactly that purpose? – Niet the Dark Absol Commented Apr 9, 2021 at 10:29
• 2 Because type="tel" allows all characters. Acts the same as type="text". – zagoor Commented Apr 9, 2021 at 10:32
• @zagoor Input is your customized ponent or es from a library ? Can you provide that code ? – Vo Quoc Thang Commented Apr 9, 2021 at 10:48

1 Answer 1

If you want to prevent certain keys from being pressed, you can surpress the keydown event after the check is failed:

<Input
  onKeyPress={(e) => {
    if (e.key === "e" || e.key === "-") {
      e.preventDefault();
    }
  }}
/>

But if you allow all keys but validate it after being pressed, you can use the pattern option like this:

<Controller
  name="phone"
  control={control}
  rules={{ required: true, pattern: /^\d+$/ }}
  render={(props) => {
    const { onChange, value, ref } = props.field; // v7. use props if you're using v6
    const { error } = props.meta;

    return (
      <Input
        ref={ref}
        type="number"
        label="phone"
        onChange={onChange}
        val={value}
      />
    );
  }}
/>