Numeric Validation using OnKeyPress in jQuery

Numeric Validation using OnKeyPress in jQuery

In web development, validating user inputs is crucial to ensure data accuracy and prevent malicious attacks. Numeric validation is one of the common validation tasks to restrict users from entering non-numeric characters in a text box. This article will show you how to perform numeric validation using the onKeyPress event in jQuery.

1. Using the OnKeyPress Event

The onKeyPress event is triggered whenever a key is pressed in a text box. By checking the character code of each key press, you can determine whether it is a numeric character or not. If it is not a numeric character, you can prevent the default behavior using the event.preventDefault() method.

$("#textbox").on("keypress", function(event) {
  var key = event.which;
  // Only allow numbers
  if(key >= 48 && key <= 57) {
    return true;
  }
  else {
    event.preventDefault();
    return false;
  }
});

Using a Regular Expression

Another way to perform numeric validation in a text box is to use a regular expression. A regular expression is a pattern that can be used to match and manipulate strings. In this case, you can use a regular expression to match numeric characters and replace all other characters with an empty string.

$("#textbox").on("input", function() {
  $(this).val(function(index, value) {
    return value.replace(/[^0-9]/g, "");
  });
});