Ufdjrw

I have an input numeric field where I registered all changed events:

• onchange


• onkeydown


• onkeyup


• onmousedown


• onmouseup

I need to permit inserting only numeric values with these rules:

• Values between 0 and 24


• It is possible to have decimal values.


• Decimal value must be have only 1 decimal digit.


• Decimal section must be a multiple of 0.5.

I need to immediately replace the old value if the current value is invalid.

So I have to accept, for example, values like these:

• 0


• 0.5


• 12


• 23.5


• 24

I can't accept values like these:

• Hello


• -0,


• -1


• .


• ,,


• .5


• 25


• --2


• ...


• e

I tried to use this code, but it does not cover all cases:

function customValidation(value) (parseFloat(value) <= 24 && parseFloat(value) >= 0));


function eventListner(el) 
 if (customValidation(el.value)) 
 el.oldValue = el.value;
 else if (el.hasOwnProperty("oldValue")) 
 el.value = el.oldValue;
 

Sounds like you could benefit from using a "number" input type and just specifying the min, max, and step properties instead of using a RegEx for validity. For example:

<input type="number" name="myNumber" id="myNumber" min="0" max="24" step="0.5">

Then you can just check the validity with the standard methods available:

let myNumberInput = document.getElementById("myNumber");
let myNumberIsValid = myNumberInput.checkValidity();

The MDN web docs also has some useful information on their Constraint validation API page.

This regex covers all cases:

/^(?:(?:d|1d|2[0-3])(?:.[05])?|24(?:.0)?)$/

https://regex101.com/r/KZeVKa/1

Expanded:

 ^ # BOS
 (?:
 (?: # 0 - 23.5
 d 
 | 1 d 
 | 2 [0-3] 
 )
 (?: . [05] )?
 | # or,
 24 # 24.0
 (?: . 0 )?
 )
 $ # EOS