Search code examples
javascriptjqueryresponsive-designtablet

Jquery Max Value Validation for Number Field


I am working on responsive Html Design. There are some number fields and they have some requirements.

  1. Control take only number
  2. After decimal it take only two digits
  3. Max value not greater than 9999999999
  4. Max Length is 9 in case float value it will (999999.99)
  5. All validation work on key press or key up

I implement this code it working fine for desktop and other mobile device but not working on any Samsung tab. If i use input type="number" then maxlength or max value not working in Samsung tab. Plz help me.

CODE

$("#txtnumber").keydown(function (event) {
        if (event.shiftKey == true) {
            event.preventDefault();
        }
        if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190 || event.keyCode == 110) {
        } else {
            event.preventDefault();
        }
        if (($(this).val().indexOf('.') !== -1 && event.keyCode == 190) || $(this).val().indexOf('.') !== -1 && event.keyCode == 110)//Allow only one time decimal to input
            event.preventDefault();
    });
    $("#txtnumber").keyup(function () {
        var number = ($(this).val().split('.'));
        if (number[1].length > 2) {
            var FNumber = parseFloat($("#txtnumber").val());
            $("#txtnumber").val(FNumber.toFixed(2));
        }    

    });

JSFiddle URL


Solution

  • Here is an example using jquery,

        $("#txtnumber").on('keyup keydown', function () {
          if (isNaN(($(this).val()))) {
            $(this).val($(this).val().substring(0, ($(this).val().length - 1)));
          }
          if ($(this).val().length > 10 && $(this).val().indexOf('.') == -1) {
            $(this).val($(this).val().substring(0, 10));            
          }
          if ($(this).val().indexOf('.') !== -1 && $(this).val().length > 9) {
            $(this).val($(this).val().substring(0, 9));
          }
          if (($(this).val().indexOf('.') !== -1)) {
            var decimal = $(this).val().split('.');
            if (decimal[1].length > 2) { 
                $(this).val($(this).val().substring(0, ($(this).val().length - 1)));
            }
          }
        });
    

    Updated Fiddle