how to add for loop to following JavaScript to validate inputs?-CodePudding

this is my javascript which works for single input fields but I want it to work for multiple input.

here if I try to insert value for input class=adv more than fixed input value of class=full it won't allow

var $full = $('[class=full]');
var $adv = $('[class=adv]');

$adv.on('keyup keydown', function(e) {
  var fullPay = parseInt($full.val(), 10);
  var advPay = parseInt($adv.val(), 10); //tell the parser it is base 10

  if (advPay > fullPay &&
    e.keyCode !== 46 // keycode for delete
    &&
    e.keyCode !== 8 // keycode for backspace
  ) {
    e.preventDefault();
    $adv.val('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="full"  value="5">
<input type="number" name="adv"  />

CodePudding user response：

The effective line:

$('[class=full]').val()

will only take the first element with class "full".

You need to use relative DOM navigation inside the handler, eg:

$(this).prev().val()

Similar for $adv.val(), use $(this).val() and $(this).val('') to clear the current input.

You can also use input event which will catch more events, such as paste with the mouse.

$('[class=adv]').on('input', function(e) {
  var fullPay = parseInt($(this).prev().val(), 10);
  var advPay = parseInt($(this).val(), 10); 

  if (advPay > fullPay &&
    e.keyCode !== 46 // keycode for delete
    &&
    e.keyCode !== 8 // keycode for backspace
  ) {
    e.preventDefault();
    $(this).val('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="full"  value="5">
<input type="number" name="adv"  />
<br/>
<input type="number" name="full"  value="55">
<input type="number" name="adv"  />
<br/>
<input type="number" name="full"  value="555">
<input type="number" name="adv"  />

Using .next() or .prev() will mean your html is brittle (any minor changes will break the js) - a better solution would be to wrap each pair:

$('[class=adv]').on('input', function(e) {

  var fullPay = parseInt($(this).closest(".inputgroup").find(".full").val(), 10);
  var advPay = parseInt($(this).val(), 10);

  if (advPay > fullPay 
    && e.keyCode !== 46 // keycode for delete
    && e.keyCode !== 8 // keycode for backspace
  ) {
    e.preventDefault();
    $(this).val('');
  }
});

.inputgroup { padding:5px 0 5px 0; border-bottom: 1px solid #CCC; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='inputgroup'>
  <input type="number" name="full"  value="5">
  <input type="number" name="adv"  />
</div>

<div class='inputgroup'>
  <input type="number" name="full"  value="55">
  <input type="number" name="adv"  />
</div>

<div class='inputgroup'>
  <input type="number" name="full"  value="555">
  <input type="number" name="adv"  />
</div>