issue: Number validation "max" is ignored

[kevincompton]

Version Number

7.45.1

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/red-glade-kdzg3c?file=%2Fapp%2Fpage.tsx%3A28%2C30

Steps to reproduce

1. enter an amount below 1, you'll see the validation work
2. enter an amount above 12000000 and see it not work

Expected behavior

It should show a validation error when the integer exceeds the set maximum.

What browsers are you seeing the problem on?

No response

Relevant log output

N/A

Code of Conduct

• I agree to follow this project's Code of Conduct

[Moshyfawn]

There are several points to be addressed here: first, the way you define your min & max validation rules doesn't define the error message to be displayed on render. You can define your validation rules and messages like this:

register("field", {
  required: "This is required",
  min: {
    value: 1,
    message: "Min value is 1"
  },
  max: {
    value: 10,
    message: "Max value is 10"
  }
})

This way you can access the message property of the validation rule object and display the error message you you've defined.

errors.minimum_budget?.message // this will display "Min value is 1", "Max value is 10" or "This is required"

Otherwise you'll try to display an empty string, which is the default value for the message property of the validation rule object.

Second, the validation mode in your example codesandbox is set to onBlur, which means that the validation is only triggered when the input loses focus. Based on your reproduction steps, you expect the validation message to appear when the input value changes, which is not the case with your current mode configuration.

[kevincompton]

Thank you for the solution, I'd recommend putting this in your documentation as it alluded 3 of our devs including myself.

[Moshyfawn]

What do you think needs to be added to the documentation? There is a section that shows how to set an error message in the validation rules field and a section on the validation mode section that explains how it affects when the form is validated.