Input Field Value Should Not Be Greater Than Other Field Value

function forceLimit(e) {   var limit = e.target.getAttribute("max");   if(e.target.value > limit)     e.target.value = limit;}
function handleLimitChange(e) {  var limit = e.target.value;  var fieldOne = document.querySelector('#field-one');  if(fieldOne.value > limit) {     fieldOne.value = limit;  }  fieldOne.setAttribute('max', limit);}

<form><input type="number" id="field-one" class="fieldone" onchange="forceLimit(event)" min="0" max="16" step="0.1"><input type="number" id="field-two" class="fieldtwo" onchange="handleLimitChange(event)" min="0" max="16" step="0.1"></form>

Multiple dynamically created input field values cannot exceed a specified number

There are a few issues with the code in the JSFiddle (the code posted above is not enough to diagnose the issue).

Not finding all $input

let $preview = $(file.previewElement);
let $input = $preview.find('.fileinput');

Your $preview is connected to each file, so you will only ever find one $input, the one that is being changed.

Incorrect use of .each()

$input.not(this).each(function() {

The function passed to .each() must accept as arguments an index and the value. As it is currently set up, $input will always refer to the same value in every iteration of the loop.

Attempt to compute a total with a sanitised / modified value

  newVal = Math.max(0, newVal);
  newVal = Math.min(10, newVal);

Here ensure that newVal is in the range 0-10, but then you use the changed value to compute the total newVal + valueSpent > maxValue

Solution

The following code fixes all of these issues.

const attributeVal = $input;

attributeVal.on("change paste keyup input", function (e) {
  const maxValue = parseInt(aantal);
  let valueSpent = 0;
  $preview.closest('.dropzone').find('.fileinput').each(function (index, input) {
    valueSpent += +$(input).val();
  });
  if (valueSpent > maxValue) {
    // Invalid, reset these points to the maximum allowable:
    $input.val($input.val() - (valueSpent - maxValue));
  }
});

attributeVal.on("cut copy paste", function (e) {
  e.preventDefault();
});

This works for me on the JSFiddle.

---

Related Topics