When the validation process fails, can I only cause errors while maintaining the same value?

[natonato]

Hello.

What I Want :

I want to use an input that can only enter numeric values.

If a value other than a number is entered, I would like to display only the error message without updating the input value.
That way, the value will always keep the number.

What I Tried :

Code Sandbox : https://codesandbox.io/p/sandbox/register-forked-vyjskp?file=%2Fsrc%2FApp.js
React Hook Form Version : 7.50.1

1. Setting the valueAsNumber:true and type="number" removes non-numerical values, but no error occurs.

2. When a pattern or validate function is applied, non-numerical values are not removed, but are shown as they are.

pattern: {
  value: /^[0-9]+$/,
  message: 'Please enter a number',
},

validate: (value) => {
  const newValue = value.replace(/\D/g, '');

  if (value !== newValue) {
    return 'Please enter a number';
  }
  return true;
},

3. If I keep the same value using setValue inside validate, the error will not occur normally.

• Even though the shouldValidate option is set to false

validate: (value) => {
  const newValue = value.replace(/\D/g, '');

  if (value !== newValue) {
    setValue('onlyNumberInput', newValue, {shouldValidate: false});
    return 'Please enter a number';
  }
  return true;
},

Is there a way to use only errors while keeping the same value?

Thank you.

[Moshyfawn]

You'd have to host your own state because RHF needs to have the value stored and accessible in it's store in order to perform validation.