Hi Team,
We are looking to implement real-time (onChange) validation for input fields within UESIO views — particularly for text and number fields. The goal is to restrict users from entering invalid characters at the time of typing, not just during form submission.
Specifically, we want to achieve the following:
Prevent decimal values in number fields.
Allow only whole numbers (no letters, special characters, or decimals) in text fields.
We have already implemented regex-based validation in the collection definition, which works correctly on the SAVE wire signal. However, it only triggers after the any signal action, whereas we need the validation to act immediately on user input (onChange) — preventing invalid characters from being typed at all.
Could you please guide how we can implement such real-time input restrictions within UESIO views?
Great use case! To achieve this, you would need to write a custom React component that would handle the text input. Within it, you can perform the validation/checks that you mention including not allowing invalid characters, checking things like min/max length, and even apply auto-formatting if you want.
In short, here are the steps:
Create a uesio React custom component - You write this component just like you would any react component that handle text input
In your view, instead of using “Field” component to display your field, use your custom component
One of the great things about uesio is that you actually do not need to write your own full-blown React component. Instead, you can find any available React component (e.g., on npm) that has the features you want. From there, you create a simple uesio React component that “wraps” the third-party component.