How to prevent user to enter more than two digit after decimal?

Question

Below is my textbox:

<input type="number" id="payement-textbox'+index+'" name="payment-textbox" min="0" max="100000" step="any" maxlength="9" class="payment" placeholder="--" value=""/>;

There are two validation on my number type textbox. First is user cannot enter value bigger than 99999.99 which I applied successfully. The other one is that user cannot enter more than two digits after decimal which is not working.

Here is my jQuery code:

$('input.payment').on("change paste keyup", function(event) {
          var max = parseFloat($(this).attr('max'));
          var num = parseFloat($(this).val());
          if ( num >= max)
          {
              $(this).val("99999.99");
          }  
          if( ($(this).val().indexOf('.') != -1) && ($(this).val().substring($(this).val().indexOf('.')).length > 2))
          {
          event.preventDefault();
          }

        }); 

Could you please tell me where I am going wrong?

Answer 1

Try:

$("#yourinput").keyup(function(){
  var num = parseFloat($(this).val());
  if ( num >= 99999.99)
  {
    $(this).val("99999.99");
  }  
  
   var number = ($(this).val().split('.'));
   if (number[1] && number[1].length > 2)
   {
    var salary = parseFloat($("#yourinput").val());
    $("#yourinput").val( salary.toFixed(2));
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input id="yourinput" pattern="\d+">
<span id=bad style="display:none;color:red">BAD</span>