номер в поле ввода не выше другого поля ввода

Question

У меня есть два поля ввода в моей контактной форме, в обоих полях можно только заполнить число. У меня вопрос, есть ли способ, что число в поле 1 никогда не может быть больше, чем число в поле 2?

Я искал везде, но не могу найти решение. Это вообще возможно (с Javascript)? Надеюсь, кто-нибудь найдет решение или может направить меня в правильном направлении.

<form>
<input type="number" class="fieldone" min="0" max="16" step="0.1">
<input type="number" class="fieldtwo" min="0" max="16" step="0.1">
</form>

Answer 1

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>

Answer 2

Вы можете использовать jQuery, чтобы проверить, что всегда значение в поле 2 больше или равно полю 1:

$('.fieldone').change(function(){
  checkValue();
});

$('.fieldtwo').change(function(){
  checkValue();
});

function checkValue(){
  var maxValue = $('.fieldtwo').val();
  if(maxValue > 0 && $('.fieldone').val() > maxValue){
    $('.fieldone').val(maxValue);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="number" class="fieldone" min="0" max="16" step="0.1">
<input type="number" class="fieldtwo" min="0" max="16" step="0.1">
</form>