Validating Input field using simple types and regex.

Validating input field value is essential as much as validating required fields. There will be situation where we need to validate user input from entering inappropriate data to form fields. For example, name field should not have digits, PIN number field should accept only numbers and many more similar instances.

Using simple types in SAPUI5 is effective and easy to use method for validating fields. It provides many customization’s and options for validation.

To use simple types we are not allowed to use hard coded value for input field. Instead we have to use data binding in first place. Most of the times input value will be bound to some model property. In case if it doesn’t, simply bound value to model property before proceeding with field validation. If binding is not at all possible then you can handle validation using liveChange event of input field instead of using standard way of using simple types.

Read: Input field validation without using simple types and value binding.

String and Numeric value validation

To validate user entered input, we need to bind value to some model property first. Then we have to pass SAPUI5 simple type. There are several simple data types such as String, Integer, Float, Boolean. With simple types we have to pass constraints for validation as shown below.

Code:

Only Alphabets are allowed with below regex

Only digits are allowed with below regex

 

Search parameter in constraints will accept regular expressions. We can pass regular expressions as per our requirement. Constraint will accept other properties such as startsWith, endsWith, contains etc..

Handling validation Error and Success

We can handle validation error and success usingĀ validationError andĀ validationSuccess events. We can handle based on our requirement. Below is the code for changing value state based on validation.

Using generic validation handling

Instead of using separate event handler for each control, we can use generic event handler by attaching event handler to the core in OnInit function.

Restricting invalid user input from typing

We can even restrict user from typing invalid characters in input field using below code for event handler. Here we are just replacing old value every time user enters invalid character.

Output:

String and number Validation