[Input] add option to validate user input on input with type number

[nnaydenow]

Discussed in #10447

^{Originally posted by Xidai December 30, 2024}
Consider this scenario, there is a Input with type="Number", I only type '-' into the Input and focus out, the '-' is not a valid number, so the event.target.value returns empty, but what we need is to highlight it with error state to tell the user this is not a valid number so that he/she should modify it. But I can not get the real input '-'. Is there any way I can achieve that?

Hello colleagues,

Native input has valueAsNumber property which validates the value, but it returns NaN whether the input is empty, but it still might be valid if required is not set.

In native input it could also be checked with :valid / :invalid selectors which are controlled by element internals.