Hi , I am trying to validate user's input on every key enters aginst regex, but not working when regex added in javascript, Tried the regex with Regex101 site , its working fine. Not able to enter any values in input box, when added. Here I am attached oml file for reference and below is the js code in javascript node. Any help is much appreciated. Thanks in advance!
var input = document.querySelector('#' + $parameters.WidgetId );
function validate(input) {
//the below regex allow min 1 digit and max 10 digits including only one decimal (.) , first and last character should not be decimal (.)
const regex ="^\d{1,10}$|(?=^.{1,10}$)^(0|[1-9]\d*)(\.\d+)?$";
return regex.match(input);
}
input.addEventListener('keydown', (event) => {
if (event.key.length === 1) { // only check single characters
const newValue = input.value + event.key;
if (!validate(newValue)) {
console.log("Fail.."+newValue);
event.preventDefault();
else
{
console.log("Pass.."+newValue);
});
Hello Mahesh,
here is a solution that does not require you to implement custom JavaScript on your own:
The forge component Input Mask Reactive does exactly what you want and allows you to use a custom RegEx. The component also comes with a demo app. In your case the block InputMask\InputPatternMask fulfils your requirement with the following parameters:
Your RegEx does not work the way you want. Use ^\d{1,10}$|^(?=.{1,11}$)\d+\.\d*$ instead to allow
I hope this solves your question.
Tipp: Please do not zip your oml-files before uploading them to the forum. They contain a license check that prevents execution in other environments. If you upload the oml-file directly, this check is removed by the forum automatically.
Hi @Sebastian Krempel ,
Thank you for the solution you provided. I have implemented it and it has been helpful. However, I believe I may need to make some adjustments to the regex in order to fully meet my requirements.
Thank you again for your assistance.
Hi Mahesh,
there are some issues with your example:
Why do you want to validate that only allowed characters are typed with a custom JavaScript? You have bound the Input widget to a variable of type Decimal, so OutSystems already does what you aim for.
If you want to register own JavaScript event listener for whatever reason, you should do this in the OnReady event of the screen or block:
As you can see, I have used an OutSystems client action as the event handler here. This can also receive the JavaScript event object:
Finally, don't forget to remove your custom event listeners in the respective OnDestroy event of the screen or block to clean things up:
I hope this answer helps you and I'm pleased if you mark it as solution.
Hi @Sebastian Krempel , Thank you for your reply.
I'm trying to achieve that, input box allows(only digits and one decimal) max 10 digits and includes only decimal, and that decimal shoud not be typed at first (1st position ) and last(10th position) in real time (while user typing). For that purpose, Im using javascript at every keydown event on input box. I am using custom JavaScript event listener acieve this behavior in real time. Please suggest any approach to this with out using custom Javascript.
I tried with the solution, with sending Event ID is "keydown" may be this is wrong, and seeing no validation happening while entering values, its takes unlimited digits. Could you please suggest , where the regex validation can takes place in this scenario. Here Iam attaching updated oml for reference. It would be help if you share the oml .Please correct me if my approach is not correct.
Thansks in advance!