60
Views
10
Comments
Solved
Restrict input for 5 character only

How to make regex search action to limit input with integer data type to 5 characters, but working on the client section only?

2023-10-21 19-42-11
Tousif Khan
Champion
Solution

Hi @Soo Jin Park 

I've added a js code that will work for all the inputs on each row added a class on a input and selected all inputs.

// Select all input elements with the class 'restrictedInput' const restrictedInputs = document.querySelectorAll('.restrictedInput'); // Add event listeners to all selected input elements restrictedInputs.forEach(inputElement => { inputElement.addEventListener('input', function (event) { inputElement.value = inputElement.value.slice(0, 5); }); });

Sample

I hope this helps
Thanks
Tousif Khan

TestApp_Regex_.oml
2019-04-09 00-57-55
carl ruhle

Hi Soo,

regular expression \d{5} will only accept 5 numeric digits. 

I can't explain clearly because I'm using a tablet. 

Regards 

2023-10-21 19-42-11
Tousif Khan
Champion

Hello,
You can do it easily via Js
There is already Solution marked for this check here
https://www.outsystems.com/forums/discussion/65176/how-to-limit-the-input-with-number-type/
I hope this helps
Best Regards
Tousif Khan

UserImage.jpg
Soo Jin Park

Hi Tousif Khan,

i can't use the code from the link you referenced because my input field is in a table list so it doesn't work for me

2023-10-21 19-42-11
Tousif Khan
Champion
Solution

Hi @Soo Jin Park 

I've added a js code that will work for all the inputs on each row added a class on a input and selected all inputs.

// Select all input elements with the class 'restrictedInput' const restrictedInputs = document.querySelectorAll('.restrictedInput'); // Add event listeners to all selected input elements restrictedInputs.forEach(inputElement => { inputElement.addEventListener('input', function (event) { inputElement.value = inputElement.value.slice(0, 5); }); });

Sample

I hope this helps
Thanks
Tousif Khan

TestApp_Regex_.oml
UserImage.jpg
Soo Jin Park
UserImage.jpg
Soo Jin Park

Hi @Tousif Khan 

The code you provided helped solve the limit of input to 5 characters, but I ran into another problem. The value stored in the variable does not match what is entered in the input field. For example, I enter the number 202, only 20 is stored in the variable. How do I solve this?

2023-10-21 19-42-11
Tousif Khan
Champion

Hello

In that case you can use  a JS

// Select all input elements with the class 'restrictedInput'

const restrictedInputs = document.querySelectorAll('.restrictedInput');

// Add event listeners to all selected input elements

restrictedInputs.forEach(inputElement => { inputElement.addEventListener('input', function (event) { inputElement.value = inputElement.value.slice(0, 5); });

// add a output parameter in your JS code and Assign the value
$outputParam = inputElement.value;

});


After this assign the value back to your variable.
Thanks
Tousif Khan

2024-05-22 06-12-56
Vignesh Prakash
2021-11-12 04-59-31
Manikandan Sambasivam

@Soo Jin Park  

Use the following JavaScript code in the client action to limit the input to 5 characters:

function limitToFiveCharacters(event) {

    const regex = /^\d{0,5}$/; // Regex to match up to 5 digits

    const value = event.target.value; // Get the current value of the input field

    if (!regex.test(value)) {

        event.preventDefault(); // Prevent input if more than 5 digits

    }

}

UserImage.jpg
Soo Jin Park

Hi @Manikandan Sambasivam 

Do I just need to use this code in my JavaScript widget or do I have to do any other configurations on the input field?

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