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 · Accepted solution]

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/

[bishalsharm]

Hi @Ankith Sharma 
thanks for ur response and i am able to achieve it. I have one silly quesion where do we can see the error message as of now it is only turning he whole input field into red color.

Thanks

[Ankith Sharma]

Hi @bishalsharm,

The error message is displayed inline below the input field only when the Input component’s Show Error Message property is enabled. If this option is disabled, the input will only turn red without showing the message text.

Please check the Input component configuration and ensure Show Error Message = true, and that the errorMessage property is being set in your script. Once enabled, the message will appear directly under the field.

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

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