JavaScript not working for more than two input fields in num lock numbers

Question

I've form validation using JavaScript, I'm using this to allow only numbers on keyboard in input fields including numbers in top and num lock numbers. But this JavaScript only work for first input field, but I have several inputs fields how to adjust it?

The Problem is related to num lock numbers in keyboard right side.

In input second and third, num lock numbers not working. How to solve it?

Here is my code:

$(document).ready(function() {

  $("#inp1").keypress(function(e) {
    if (e.which != 8 && e.which != 0 && String.fromCharCode(e.which) != '-' && (e.which < 48 || e.which > 57)) {
      $("#errmsg1").html("* Input digits (0 - 9)").show().delay(2000).fadeOut("slow");
      return false;
    }
  });

  $("#inp2").keydown(function(e) {
    if (e.which != 8 && e.which != 0 && String.fromCharCode(e.which) != '-' && (e.which < 48 || e.which > 57)) {
      $("#errmsg2").html("* Input digits (0 - 9)").show().delay(2000).fadeOut("slow");
      return false;
    }
  });

  $("#inp3").keydown(function(e) {
    if (e.which != 8 && e.which != 0 && String.fromCharCode(e.which) != '-' && (e.which < 48 || e.which > 57)) {
      $("#errmsg3").html("* Input digits (0 - 9)").show().delay(2000).fadeOut("slow");
      return false;
    }
  });

});

#errmsg {
  color: red;
}

#errmsg2 {
  color: blue;
}

#errmsg3 {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Number : <input type="text" name="quantity" id="inp1" />&nbsp;<span id="errmsg1"></span></p>
Number : <input type="text" name="quantity" id="inp2" />&nbsp;<span id="errmsg2"></span></p>
Number : <input type="text" name="quantity" id="inp3" />&nbsp;<span id="errmsg3"></span></p>

You will find your answer here: [KeyEvents - MDN](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Notes). Please read *special cases*. — Rajesh, Jan 29 '18 at 07:05
because in the form fields, some of input fields have different targets that it can be used for number and text. that's why I used text but restricted to the numbers. the same form has other validation to check text as input if user click the form for different section. — Jomla, Jan 29 '18 at 07:06
You can check this to accept only numbers https://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery — Milan Chheda, Jan 29 '18 at 07:12

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

You used keypress for first one but keydown for others. If you change second and third one to keypress too your problem will be solved. You can also optimize your code basically like this without changing too much thing. But there is better ways to optimize.

Original Version

I added this after you said I need to use both events.

Keypress event treats A and a differently while keydown looks for only which button is pressed and treats A and a same. All you need is changing (e.which < 48 || e.which > 57) to (e.which < 96 || e.which > 105) in keydown events.

$(document).ready(function() {
  $("#inp1").keypress(function(e) {
    if (e.which != 8 && e.which != 0 && String.fromCharCode(e.which) != '-' && (e.which < 48 || e.which > 57)) {
      $("#errmsg1").html("* Input digits (0 - 9)").show().delay(2000).fadeOut("slow");
      return false;
    }
  });
  $("#inp2").keydown(function(e) {
    if (e.which != 8 && e.which != 0 && String.fromCharCode(e.which) != '-' && (e.which < 96 || e.which > 105)) {
      $("#errmsg2").html("* Input digits (0 - 9)").show().delay(2000).fadeOut("slow");
      return false;
    }
  });
  $("#inp3").keydown(function(e) {
    if (e.which != 8 && e.which != 0 && String.fromCharCode(e.which) != '-' && (e.which < 96 || e.which > 105)) {
      $("#errmsg3").html("* Input digits (0 - 9)").show().delay(2000).fadeOut("slow");
      return false;
    }
  });
});

#errmsg {
  color: red;
}

#errmsg2 {
  color: blue;
}

#errmsg3 {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Number : <input type="text" name="quantity" id="inp1" />&nbsp;<span id="errmsg1"></span></p>
Number : <input type="text" name="quantity" id="inp2" />&nbsp;<span id="errmsg2"></span></p>
Number : <input type="text" name="quantity" id="inp3" />&nbsp;<span id="errmsg3"></span></p>

Smally Optimized Version

$(document).ready(function() {
  //All ids seperated with commas(,) which means 'or'
  $("#inp1, #inp2, #inp3").each(function(i) {
    $(this).keypress(function(e) {
      if (e.which != 8 && e.which != 0 && String.fromCharCode(
          e.which) != '-' && (e.which < 48 || e.which >
          57)) {
        // i starts from zero but errmsg ids starts from 1 so we must use (i+1)
        $("#errmsg" + (i + 1)).html("* Input digits (0 - 9)").show()
          .delay(2000).fadeOut("slow");
        return false;
      }
    });
  });
});

#errmsg {
  color: red;
}

#errmsg2 {
  color: blue;
}

#errmsg3 {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Number : <input type="text" name="quantity" id="inp1" />&nbsp;<span id="errmsg1"></span></p>
Number : <input type="text" name="quantity" id="inp2" />&nbsp;<span id="errmsg2"></span></p>
Number : <input type="text" name="quantity" id="inp3" />&nbsp;<span id="errmsg3"></span></p>

No. An answer is something that explains the issue and solution. This is a suggestion — Rajesh, Jan 29 '18 at 06:57
Thanks for your pointing to the right section, but I'm looking for solution for both methods keypress and keydown. — Jomla, Jan 29 '18 at 07:00
Your Smally Optimized Version is perfect. Thanks and thumps up. :) — Jomla, Jan 29 '18 at 07:40
You can also change selector to `input[id*="inp"]` which means 'find inputs which id of them contains "inp"'. — Yusuf Kandemir, Jan 29 '18 at 07:43

score 0 · Answer 2 · edited Jan 29 '18 at 07:38

I think this will be helpful for you. This is for keydown event.

 $("#inp3").keydown(function (e) {         
       let code = e.keyCode - 48 * Math.floor(e.keyCode / 48);
       if (code != 8 && code != 0 && String.fromCharCode(code) != '-' && (code < 48 || code > 57)) {
            $("#errmsg3").html("* Input digits (0 - 9)").show().delay(2000).fadeOut("slow");
            return false;
       }
 });

JavaScript not working for more than two input fields in num lock numbers

2 Answers2

Original Version

Smally Optimized Version