Whole Numbers in SAPUI5

When possible, it is better to help the user identify and key in the correct values!

It is all numbers….. Photo by Laura Rivera on Unsplash

We all had this scenario, where in you would fill up a form containing large number of input fields and click the ‘Submit’ button. Wait for the server to give you a response back. Only to be told that an input you had provided contains an incorrect letter!!! How frustrating this could be? What else we could do? How can we reduce the frustration your user/potential customer would have after seeing this? What if we could give instantaneous feedback and as and when they key in, help them decide the correct value(s) with appropriate messages? Let us quickly consider one such scenario in the SAPUI5 technology, the front end framework for SAP Enterprise applications. For a brief overview of what SAPUI5 technology is, please check the below from a fellow medium writer:-

SAP UI5 OVERVIEW | SAP UI5 ARCHITECTURE — FEATURES

Scenario

Towards the test scenario, let us consider an input field wherein you are expecting the user to provide a ten digit number(for example, the mobile phone number-based on your region). Certainly you are not expecting any decimal places, alphabets and special characters here. An overly simplified screen developed using SAP Web IDE(SAP provided IDE(trial) for development) would look like the below:-

Fig 1. Simple Input Field in UI5 for accepting Mobile Number.

A single Input field with corresponding Label is placed on the view.

We have no validations in place and this would cause the form to accept anything of any length provided by the user as below:-

Fig 2. Input field with no validations in place.

Using Regular Expressions?

Of course, we could utilize plenty of available Regular Expressions available for use to implement the restrictions in place. However the problem being customizing the results offered by using RegExp would be difficult. For example we want to provide continuous assisted feedback to user till they finish providing the accurate value. Let us quickly try one of the RegExp for the same. We are extending the liveChange event offered by the control so that we could quickly restrict the input to whole numbers. One such solution is available on the SAP Community Network forum as below:-

How to make input field accept only numeric values in sapui5 using XML?

Implementing this solution on the liveChange event would be as below:-

This would restrict the user from entering anything other than numbers. Anything other than numbers it would simply ignores it and the old value remains in place.

Fig 3. Restrict to only numbers using RegEx.

However the major drawback being we loose the continuous feed back that would be of some help to the user to correctly guide them into entering the expected value(s), like as soon as they enter some value other than number, we would like to inform them what is wrong and accordingly replace the text. Also it does not restrict the length to ten.

Without Regular Expressions

Let us quickly restrict the length of field to ten characters without RegEx and proceed to give appropriate feedback at each stage. We are using a MessageToast control here to show messages to the user every time.

Fig 4. Restricted to ten digits.

What we had done is included few checks on the length of the input and replaced the old value anytime this goes over ten as below:-

However this would still allow alphanumeric or special characters in as below:-

Fig 5. Characters other than numbers still allowed.

Type Restriction

One easy fix we could do is to change the ‘type’ value of the ‘Input’ control to ‘sap.m.InputType.Number’.

Fig 6. Input Type restricted to ‘Number’.

This more or less solves our issue, the only problem being that it does not restrict the user from entering a flat type value, value with decimal places as in Figure 6 above. Now we enhance the check for ‘.’ in the input value to tackle decimal places and inform the user accordingly. We would stick to ES5 format as many of the users would be using different IE versions.

Fine this would now handle the decimal places by ignoring it and would stick to old value up to the decimal place as below:-

Fig 7. Decimal places handled.

Now comes another problem, the exponential values it may still take into consideration.

Fig 8. Power of values being accepted?

Instead of writing condition for each and every unwanted characters, let us utilize the ‘NaN’ function in JavaScript.

Now this handles anything other than numbers as below:-

Fig 9. No more exponents.

Full code on GitHub as below:-

jakes2255/UI5-Input-Validation

Thank you for reading!