Hi, I am trying to prevent (not to enter) decimal (.) character as first character in input feild of type Number datatype.
My requirement is to not to allow decimal at any time (including first time page load)in the given input field. I am trying to fix the issue but its not working for first time pag loads, after hitting backspace its working.
Attahed oml solution handles max 10 digits (which includes decimal , if user enters) and should not allow last digit as decimal. Thats working as expcted. This is Reactive app.Any help is much appreciated.
Thanks in advance!
Hi @Mahesh Rebba ,
You can simply add a javascript node to your OnReady handler of your screen, with the following code:
const inputField = document.getElementById($parameters.widgId);inputField.onkeydown = function(e){ if(e.target.value.length === 0 && e.key === '.'){ e.preventDefault(); }}
where widgId is the .Id of your input widget.
This way, it will run a function everytime you press a key down, and will check if the length of your input field is 0 (empty field) and if the key pressed was '.', and if it was, it will prevent that from being typed. Should solve your issue!
Let me know if this helped!
Cheers,
Paulo
Hi @Paulo Ritto , thank you for your reply. I tried with the solution you've provided. That is working fine to me.
Another way, instead of lengthy Javascripti, I'm trying to solve this with providing specific regex ( eg, /^(?!^\.$)(?!^\.\d{1,2}$)\d{1,10}(\.\d{1,2})?$/) to validate the user input in real time i.e., while user typing text in input box instantaneously should validate against regex and if input is ok then user can see that in input, if not ok with regex that specific input should be ignored.
I made the solution with once user inputs some text after clicks on Save button validation happening but instead of that, validations should be done while user typing. Any suggestions are much more appreciated. Thanks again!
I think to validate as the user is typing you have no option other than resorting to the keydown JS event. But yes, it can indeed be done with regex, but you have to validate the text with your regex pattern on the keydown event.
If my solution worked for you, make sure you mark it as a solution so others with the same problem can see it.
Hi @Paulo Ritto , I tried with the solution using keydown event with regex , but not working as expcted i.e., allowing unlimited number in input and also allowing starting character as decimal (.). But I verified that regex format is fine. Could you please assist me on this? Please find attached oml.
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}\d{1,8})?)$/; //part-work
return regex.test(input);
}
//const input = document.querySelector('#my-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);
});