How to set min and max on an input type accepting floating value?

Question

There are plenty of examples showing how to set min and max with integers. I need to ensure the range of values can even be float. Below is how I'm setting the attributes value and max for the input type refund_amount. The problem here is that one can enter a value higher than max value set with Jquery.

window.onload = function() {
    var src = document.getElementById("grand_total");
    var dst = document.getElementById("refund_amount");
    if (dst != "") {
        dst.setAttribute("value", src.textContent);
        dst.setAttribute("max", src.textContent);       
    }
};

HTML:


  Enter Refund Amount

How do I ensure it never allows higher value than what max attribute holds?

user_519413 · Answer

The min and max attributes only work on type="number" inputs. It's also worth noting that they are not reliable as a means of validation, as they do not prevent the user from typing in a number outside the bounds of the min/max settings.

To work around that you can manually validate the value and correct it to be within bounds by using a change event and the Math.min() and Math.max() functions. Try this:

window.addEventListener('load', function() {
  var src = document.getElementById("grand_total");
  var dst = document.getElementById("refund_amount");

  if (dst) {
    dst.value = dst.max = src.textContent;
  }
});

document.querySelectorAll('input[type="number"]').forEach(input => {
  input.addEventListener('change', e => {
    let el = e.target;
    el.value = Math.min(Math.max(el.value, el.min), el.max);
  });
});



  
    Grand total
    25.68
  
  
    Enter Refund Amount

How to set min and max on an input type accepting floating value?

1 Answers