How to format number in JavaScript

Question

I need to do dynamic validation on a number while user giving input. Number format should be-- before decimal it should restrict 12 digit and after decimal 2 digit. I have written one validation function using Onkeyup and by giving maxlength. But I am facing issue like, if I remove one digit after decimal then its allowing more than 13 digit before decimal.

below function I have written for validation

function validation(e){
    var t = e.value;
    if( t.indexOf(".") <= 0 ) {
        e.value = t.substr(0,12);
    }
    if( ( t.slice( 0, e.selectionStart ).length >= ( t.indexOf(".") + 3 ) ) {
        
        e.value = ( t.indexOf(".") >= 0 ) ? 
            ( t.substr( 0, t.indexOf(".") ) + t.substr( t.indexOf("."), 3 ) ) :
            t
}

Appreciate any help!! Thanks.

The logic in that function is very convoluted (and it was impossible to read before I reformatted it). I strongly suggest you introduce named intermediate variables (and avoid slice as it mutates source data). Also this isn't localizable - have you considered using Intl instead? — Dai
– Dai, Commented Oct 8, 2020 at 5:39
Also, if this is for an <input /> element, have you considered using pattern="" instead? That way you don't need any JavaScript at all. — Dai
– Dai, Commented Oct 8, 2020 at 5:40
I would use a regular expression for this. So there can be 1-12 numbers before the decimal point and 0-2 after the decimal point? — michaelT
– michaelT, Commented Oct 8, 2020 at 5:44
@Dai This is actually xhtml code, I tried using pattern but that is not working as I need to validate on dynamic userInput.Even i tried using convertNumber function as well, but that too not working. — CodeGeek
– CodeGeek, Commented Oct 8, 2020 at 6:01

michaelT · Accepted Answer · 2020-10-08 06:37:58Z

Regex

You can use a regular expression (regex). For instance:

^(([1-9]{1}[0-9]{0,11}|[0-9]{1}))(\.\d{1,2})?$

Ok let's check out:

Numbers before the decimal point: ([1-9]{1}[0-9]{0,11}|[0-9]{1}) So either [1-9]{1}[0-9]{0,11} or [0-9]{1}, where the first expression prevents leading zeros and second expression makes the input o f 0 possible.

These expressions are followed by an optional decimal point (\.\d{1,2})?. The ? means that the expression can be there 0 or 1 times (so the input can be a decimal number or not). After the decimal point there have to be one 1 or 2 numbers (decimals).

You can try the expressions here: Online regex tester and debugger. This should work:

123456789123
123.40
0
0.0
953
953.1
953.0
953.01
953.12

This should not work:

1234567891239 // 13 numbers
000.12 // leading zeros
123.001 // Too many decimals

Implementation

Possibility 1 is to insert the regex directly into the <input> using the pattern attribute. Possibility 2 is to do the validation via javascript. Note that you have to escape the backslashes \\.

let pattern = '^(([1-9]{1}[0-9]{0,11}|[0-9]{1}))(\\.\\d{1,2})?$';
let regex = new Regex(pattern);

function validation(e){
    if(regex.test(e.value)){
        // Value fits the pattern
    }else{
        // Value do not fit the pattern
    }
}

Collectives™ on Stack Overflow

How to format number in JavaScript

1 Answer 1

Regex

Implementation

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Regex

Implementation

Comments

Your Answer

Sign up or log in

Post as a guest

Related