jQuery only numeric with 2 decimals only with max value

Question

I been trying to create validation function for input to allow only numeric with two decimal point And max value 99999999.99.

This is what I have tried so far but doesn't seems to be working.

$('#TXTCOST').keypress(function (event) {
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
        var input = $(this).val();
        if ((input.indexOf('.') != -1) && (input.substring(input.indexOf('.')).length > 2)) {
            event.preventDefault();
        }
        var arr = input.split('.');
        if (arr.length == 1 && parseFloat(arr[0]) >= 99999999) {
            event.preventDefault();
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="TXTCOST"/>

check this may be working this [link](https://stackoverflow.com/questions/21796827/jquery-allow-only-two-numbers-after-decimal-point) — Hardik Boghara, Oct 12 '20 at 06:06

score 0 · Answer 1 · answered Oct 12 '20 at 06:09

try like this.

$('#TXTCOST').keypress(function (event) {
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
        else{
            
             var input = $(this).val();
             if ((input.indexOf('.') != -1) && (input.substring(input.indexOf('.')).length > 2)) {
                 event.preventDefault();
             }
             var arr = (input+String.fromCharCode(event.keyCode)).split('.');
             if (arr.length == 1 && parseFloat(arr[0]) > 99999999) {
                 event.preventDefault();
             }
        }
        
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="TXTCOST"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="TXTCOST"/>

Note that if you type `123.22` then you cant increase the number before you remove the `.22` — Carsten Løvbo Andersen, Oct 12 '20 at 06:38
As Carsten mentioned, its not allowing to change value after entering the decimal, like 55.22 then I cannot change the 55, I have to remove the .22 in order to edit the 55 — dawncode, Oct 12 '20 at 07:06

score 0 · Answer 2 · answered Oct 12 '20 at 06:23

$('#TXTCOST').keypress(function (event) {
    if ((event.which != 46 || $this.val().indexOf('.') != -1) &&
   ((event.which < 48 || event.which > 57) &&
   (event.which != 0 && event.which != 8))) {
       event.preventDefault();
}
    var input = $(this).val();
    if ((input.indexOf('.') != -1) && (input.substring(input.indexOf('.')).length > 2)) {
        event.preventDefault();
    }
    var arr = input.split('.');
    if (arr.length == 1 && parseFloat(arr[0]) >= 99999999) {
        event.preventDefault();
    }
});

try this

MichaelHabib · Accepted Answer · 2020-10-12T09:29:41.157

My example below uses a simple regex check for 1-8 digits number with optional 0-2 decimal points:

Edit: Now the code prevents the entry of wrong value. This is done in 2 stages

On key press, make a backup of the current input value then limit user input to allowed keys
Validate current input then revert back to the old value if the new value is invalid.

  let allowed_keys = [8, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 190];
let my_regex = /^([0-9]{0,8})(\.{1,1}[0-9]{0,2})?$/;
let old_val;
let x = $('#TXTCOST').on('keydown', function (event) {
    let input_value = $(this).val().toString();
    old_val = input_value;
    let found_dots = input_value.match(/\./g) || [];
    let split_input_value = input_value.split('.');
    let prevent_default = false;
    // console.log('value = ' + $(this).val());

    let tests = [];
    tests.push(() => {
        return allowed_keys.includes(event.which);
    });
    tests.push(() => {
        return (event.which !== 190) || ((event.which === 190) && (input_value.length > 0) && (found_dots.length === 0))
    });

    tests.forEach(function (test, index) {
        if (test() === false) {
            event.preventDefault();
        }
    });
}).on('input', function (event) {
    let input_value = $(this).val().toString();
    let tests = [];
    tests.push(() => {
        if (my_regex.test(input_value)) {
            return true;
        } else {
            return false;
        }
    });
    tests.forEach((test, index) => {
        if (test() === false) {
            $(this).val(old_val)
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="TXTCOST"/>

its allowing multiple decimal values 99.99.33.33 and max value is 99999999.99 that validation is also not working. — dawncode, Oct 12 '20 at 07:05
My example only checks the input but does not alter the value in the text box or UX. Please run the code then check the console log output. The number your provided should return "99.99.33.33 did not pass the regex test." To me, the check / test is working, now it's up to you to decide how to handle wrong user input. — MichaelHabib, Oct 12 '20 at 07:12
Thank you MichaelHabib, its working as expected, I have added more keys codes, let allowed_keys = [8, 37, 39, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 190, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110]; — dawncode, Oct 12 '20 at 12:35

jQuery only numeric with 2 decimals only with max value

3 Answers3