Hi,

Input widget that only accepts numeric characters and prevents users from typing alphabetic character

• Local Variable Type associated with Input Widget: Integer
• Input Type of Input Widget: Number

Input widget that it only accepts alphabetic characters and prevents users from typing numeric characters 

• To implement this case, you need to use masking.

Thanks,

Sudip

Hi @Fábio Miguel Ferreira Coelho ,

As Sudip mentioned, for numeric values, setting the variable type to Integer and the Input Type to Number should be enough. This will only allow numeric values when typing or pasting.

For text-only inputs, you can use the following JavaScript in the OnReady event of your block or screen:

• var input = document.getElementById($parameters.InputId);
• 
  
• if (input && !input.__onlyTextValidationAttached) {
•     input.__onlyTextValidationAttached = true;
• 
  
•     input.addEventListener("input", function () {
•         input.value = input.value.replace(/[^a-zA-Z\s]/g, "");
•     });
• }

You can also check the attached sample.

________

As a recommendation you can also do client side & server-side validation using regex.

The input type Number prevents users from entering letters, which is correct. However, it still allows certain characters such as "e" for scientific notation and "-" for negative values.

Example:
But if you validate it will give you:

It's something to have in mind, so you might need to add some extra validations to prevent those if needed :)
Also there're Forge components for input mask like this one:
https://www.outsystems.com/forge/component-overview/7819/input-mask-reactive-o11

Hi @Fábio Miguel Ferreira Coelho ,
I also think you just need to set data type for fields is Interger and set Input type is Number. That's enough for this case.

If you don't want to use Integer, you also use Text but you need use Input Mask pattern and JS Regex for validation.

Hope this help!

Let me know if you are using some widget or not and which version of OS you are using.

For example,

   I am using ODC and Input Masks widget that you can use the configuration for Numbers according the image attached. In a general way, you need to add the widget below your component and make a reference to it. To reuse the same separator for decimal and group I associated them to a client variable. In my case I like to use numeric input from the left, so I set RightAlign to false.  

Well, I hope all this information help you.