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

Question

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" class="full" value="5">
<input type="number" name="adv" class="adv" />

any help apriciated

gopal
– gopal

2022-03-16 06:09:07 +00:00
Commented Mar 16, 2022 at 6:09 — gopal
– gopal, Commented Mar 16, 2022 at 6:09

fdomn-m · Accepted Answer · 2022-03-16 08:39:23Z

2

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" class="full" value="5">
<input type="number" name="adv" class="adv" />
<br/>
<input type="number" name="full" class="full" value="55">
<input type="number" name="adv" class="adv" />
<br/>
<input type="number" name="full" class="full" value="555">
<input type="number" name="adv" class="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" class="full" value="5">
  <input type="number" name="adv" class="adv" />
</div>

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

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

edited Mar 16, 2022 at 8:39

answered Mar 16, 2022 at 6:57

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gopal Over a year ago

@freedomm-m thanks for the answer it is the best solution but does it have limits

fdomn-m Over a year ago

Yes, using .next() / .prev() will mean your html is brittle (any minor changes will break the js). It would be better to wrap each full/adv pair in another container div and use .closest(".parent").find(".full"), but I wanted to keep the html as close as it was in the original.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related