Hello,

Working in Reactive Web, OS11.

I need an input field that accepts only numbers and the "." character. Setting the Input Type property of the field to "Number" allows for numbers and "." but also the -, +, e characters, which I am required to block.

In order to block -, +, e, I have implemented InputMasksLibrary, used the number mask, and set the separating characters both to "" (an empty string). This blocks everything except numbers, and I still need the decimal character.

How can I achieve this? Is it possible? Please keep in mind that I am working in Reactive Web and as such my options for Forge component are slightly limited.

Thank you!

Can you share a bit about the use case? 

Keep in mind that even if you are able to restrict the input field as desired, if the requirement is that you can only accept numbers and decimal symbol, you will have to validate on the server side that any input is valid based on those criteria. Given that, you may want to focus your efforts on simply stripping the few invalid characters in your server-side logic.

Can you use this for it?

Juan Carlos Elorde wrote:

Can you use this for it?

We do not want the decimal automatically applied, we want the user to be able to enter it as desired.

And G. Andrew Duthie, there is no way for me to perform this action client-side?


Landon Doucette wrote:

And G. Andrew Duthie, there is no way for me to perform this action client-side?

Sure, there is. I was just saying that you can't rely on that for your data to be valid, since it's possible to bypass the UI completely. If you are saving the value back to the DB, and the goal is to never have anything but numbers and the decimal symbol, client-side logic is not sufficient to ensure that.

Client-side validation or filtering is ONLY useful as a convenience for the user. It cannot be relied upon for keeping your data clean.

I've got a script that will prevent the "e", "+", and "-", but the trick with Reactive Web is getting it hooked into the right place. Working on that, and once I have it working, I'll share the solution.


Solution

Got it working. 

Select the desired input widget, and add a handler for the onkeydown event, and set the handler to a new client action.

Inside the action, add a JavaScript node with the following script:

if (event.key === 'e' || event.key === '+' || event.key === '-') {
    event.preventDefault();
}

That will prevent the use of the 3 characters you're trying to avoid, while the Input Type = Number will filter other objectionable characters. Note that this will not, however, prevent pasting a value with the above characters. I'm going to see if I can find a simple way to add that with an additional handler.

Solution

G. Andrew Duthie wrote:

Got it working. 

Select the desired input widget, and add a handler for the onkeydown event, and set the handler to a new client action.

Inside the action, add a JavaScript node with the following script:

if (event.key === 'e' || event.key === '+' || event.key === '-') {
    event.preventDefault();
}

That will prevent the use of the 3 characters you're trying to avoid, while the Input Type = Number will filter other objectionable characters. Note that this will not, however, prevent pasting a value with the above characters. I'm going to see if I can find a simple way to add that with an additional handler.

Thank you very much! I understand that client side validation is not sufficient by itself. The information is validated elsewhere before the information is written to the database, this is simply to meet a UX standard.

Again, thank you!


Quick follow-up...in addition to using the Number input type and the script I mention above, you can also use the pattern attribute to modify the pattern used for input validation. If the input does not validate against the pattern, the form cannot be submitted. That would at least prevent pasted invalid values from being posted to the form.