Optional number validation

[aphilas]

I am using RHF to make a multistep form.

On each step, I run trigger(sectionFieldNames) to validate the fields for the current section.

I ran into an issue where a user could not submit the form (at the last step). Turns out, on an optional number field, in a non-final section, they entered "nil" into a <input type="number" ...register("foo", { valueAsNumber: true })> field. In this case, RHF validation of the field passes, but HTML validation does not. Thus, the Submit button does not work, even though the HTML validation message (in another section) is hidden.

What's the most idiomatic way to ensure either no value is passed, or the value passed is a valid number (in an <Input /> component where the field may be required or not)?

Minimal Reprex CodeSandbox

Enter the value "nil" (or any other ASCII characters) and then hit "Validate." Notice that no error is displayed. However, clicking "Submit" will show the native validation message.
If the field is required an error is passed if the user enters "nil" (since NaN is the final value). If the field is not required, no error is generated when you click "Validate."

Edits:

Related issues/discussions: #6980?
Context: RHF v7

Things I have tried/considered:
validate() - from the docs, value as number runs before validation, thus I'll get NaN for both "" and "nil"
pattern - not a valid config for valueAsNumber fields

[Moshyfawn]

I usually recommend using the required validation constraint in this scenario:

register("age", {
  valueAsNumber: true,
  required: true // or a validation error message string
})

This way the validation fails if NaN is received.

[aphilas]

Okay, I guess that's a reasonable compromise. The semantics change a bit, but I can set the default value to 0, and somehow transform 0's as null in the frontend/backend. Still, I know there are cases where it maybe suitable to differentiate 0 and null/undefined.