239
Views
7
Comments
Solved
Limit the input number datatype (with Javacript) and with my input in a Block

Hello

How does this work when the input is inside a block, following the solution presented in "https://www.outsystems.com/forums/discussion/65176/how-to-limit-the-input-with-number-type/" Is it possible to use the same line of thought? 

(Reactive, O11)

What about displaying an error message when the user reaches the maximum allowed, so he knows why he can't type more?


Thank you in advance!

2023-10-27 13-43-55
Mafalda Melo Oliveira
Solution

I'm not entirely content with something. 

When I found that solution in the original post I reference above, the input wouldn't allow the user to exceed the digits indicated . I wouldn't be able to continue typing in. 

When I get to the number above the maximum set in "Lengthmax", it breaks and starts a new line with the 9th digit. 

My expectation was for it to behave as I had tested it before and stop allowing me to write on the 8th, displaying the message I was able to include. 


So, it does work for the purpose but I am not 100% happy about it.. it is not the most user friendly solution for me, if I am being critic about my own work/solution.

2017-10-31 16-30-21
erik berg

In the extended properties you can set HTML attributes that OutSystems does not expose.  For <input type="number"> the maxlength property is ignored if set.  You do have the min and max properties that you can fudge into an implied length by the number of digits in either value.

max = "99999"  implies a maxlength of 5 digits, but its up to the browser on if it allows more characters.

Also you could make an <input type="text"> and use the maxlength and pattern properties and fudge your own numberish input.

2023-10-27 13-43-55
Mafalda Melo Oliveira

Thank you! 

I actually ended up managing it on my own. For what I needed it to do.. 

So... 

Added the JavaScript code on the Onready event in the block. I had to adapt the original code because I have my block in a list and I had to identify my widget by id and get it through "getelementbyid" .I changed the code to get my widgetid and then I added the inputs for the 2 widgetid I was using . 

Besides this, since I couldn't get my error message, I added 1 action for each widget (with another JavaScript code) that verified the length and if it was higher than my local variable maxlength, then the custom error message was shown, if not, it wasn't. 


2026-05-19 09-58-29
Lucas Soares
 
MVP

Hi Mafalda, I hope you are well.

I didn't test it, but I know that the number input tag allows you to add a "pattern", so maybe try using, for example, pattern="[0-9]{1,3}", maybe it will work.


And to issue feedback you can use an OnChange event on the input with an IF looking at the lenth or another rule.


Hug,

Lucas Soares

2023-10-27 13-43-55
Mafalda Melo Oliveira

Thank you all!

 It is solved :)

I don't know how to mark it as solved, because truth is , I ended up finding the solution I referred to and explained before.

2025-12-15 09-29-24
Thibaut G

You can mark your own answer as Solution

2023-10-27 13-43-55
Mafalda Melo Oliveira
Solution

I'm not entirely content with something. 

When I found that solution in the original post I reference above, the input wouldn't allow the user to exceed the digits indicated . I wouldn't be able to continue typing in. 

When I get to the number above the maximum set in "Lengthmax", it breaks and starts a new line with the 9th digit. 

My expectation was for it to behave as I had tested it before and stop allowing me to write on the 8th, displaying the message I was able to include. 


So, it does work for the purpose but I am not 100% happy about it.. it is not the most user friendly solution for me, if I am being critic about my own work/solution.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.