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

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.

@nnaydenow

Hi @nnaydenow ,
We have discussed the problem and possible solution is for applications to listen to both change and focusout events of the numeric input. When a user types '-' in an empty input and leaves the input , change event will not be fired because the value is not modified - it is empty string regardless the typed '-' or '+' sign. But the users can listen to focusout event and check the validity state of the native input which will be false in that case:

document.getElementById("inputId").addEventListener("focusout", (e) =>  {
   const invalidNumber = e.target.shadowRoot.querySelector("input").validity.badInput;
   // set the value state of the input depending on the invalidNumber value;
   ...
});

The focusout event should also be used in case the user enters '-' and then deletes it and leaves the input empty, because in that case a change event will also not be fired.

For CSS purposes the users can still use the CSS Part we are exposing, but they can only use it for styling the input not showing a value state message:
[ui5-input]::part(input):invalid{background-color: red;}

Kind regards,
Nikoleta

This issue has been closed. To reopen, just leave a comment!

Navigation Menu

Repository navigation

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

Discussed in #10447

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Discussed in #10447

Activity

nikoletavnv commented on Apr 23, 2026

github-actions commented on Apr 23, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions