Show error popup if alphanumeric value in number field - Mobile

We are using Outsystems platform version 11 and developing a Mobile application to be run on iOS.

The device we are using is iPhone 8 with iOS 13.

We have a simple form with Input field of type number. The underlying structure uses decimal type for this input.

Q : How to show popup message to indicate user that only numbers and decimals are allowed in input field.

I created a onblur client action.

Added below javascript to check if value entered in the input is numeric only.

var pattern = /^\d+(\.\d{1,2})?$/;
$parameters.IsNumeric = pattern.test($parameters.InputValue);
return $parameters.IsNumeric;

The input value is passed from the Screenvalues into the javascript as a parameter.

If the input value is numbers only, this function works fine. However if i enter alphanumeric values in the input box the inputValue shows as "0". I suspect this is because the underlying structure of the input is decimal.

I have also tried it with below script

var pattern = /^\d+(\.\d{1,2})?$/;
$parameters.IsNumeric = pattern.test(document.getElementById("inputid").value);
return $parameters.IsNumeric;

In this case, the document.getElementById("inputid").value returns me empty string if the value is alphanumeric.

I would like to show a popup if the user enter alphabets or special characters in the input box and it has to be onblur.

How do i achieve this without making the input box a text field?


Hi Nikhil,


Is using a mask component not an option?

You could easily limit the characters you entered without having to validate

https://www.outsystems.com/forge/component-overview/2258/input-masks-library


Regards

Pedro Costa wrote:

Hi Nikhil,


Is using a mask component not an option?

You could easily limit the characters you entered without having to validate

https://www.outsystems.com/forge/component-overview/2258/input-masks-library


Regards


No Its not. The input masks library shows a telephone keyboard with no way to enter decimal.
I would like to show a popup on blur if the user entered special characters or alphanumeric values in the field.

When i try to read the entered value in input using document.getElementById i am getting empty string "". Is there any way to read the actual value entered in the input?

nikhil enmudi wrote:

When i try to read the entered value in input using document.getElementById i am getting empty string "". Is there any way to read the actual value entered in the input?

Hi everyone,

Yes, there's a way to read the actual value in the Input widget. It would be in [InputWidgetName].TypedValue

Kind regards,
Joseph Enriquez