Input component validation setup

[bishalsharm]

Hi everyone,

I’m working on a simple validation use case in ServiceNow UI Builder and need some guidance.

Use case:

• I have an Input component and a Button component on the page.

• When the button is clicked, a client script runs.

• The script checks the length of the value entered in the input field.

• If the length exceeds a limit (for example, more than 3 characters), an error message should be shown.

What’s done so far:

• Added Input and Button components

• Configured button click event

• Attached a client script to the event

Before sharing my artifacts, I wanted to ask:

• Has anyone implemented similar validation in UI Builder?

• What is the recommended approach to fetch input values and show validation errors?

Any examples or suggestions would be really helpful.
Thanks in advance!

[Ankith Sharma]

Hi @bishalsharm 

This is a common validation use case in UI Builder. I haven’t implemented it myself yet, but based on how UI Builder works, the cleanest way to handle this is by using component state and events instead of traditional client scripts.

When the button is clicked, you can read the Input component’s value directly from its state (value) inside the event handler or client script. From there, it’s just a simple length check.

For example, if the input value length is greater than 3, you can set the Input component’s invalid property to true and populate the errorMessage with something like “Maximum 3 characters allowed.” If the value is valid, you simply reset invalid to false.

This approach works well because the validation error is shown inline, follows the Now Experience design, and avoids any DOM manipulation. It keeps the solution clean, readable, and easy to maintain while giving users immediate feedback.

If you find this useful, kindly mark it as Accept as Solution and Helpful.

Regards,
- Ankit
LinkedIn: https://www.linkedin.com/in/sharmaankith/