How To Number Validation In Jquery

Validating user input is a crucial aspect of building a robust web application. In this blog post, we will discuss how to perform number validation using jQuery. We will cover the following topics:

• Using jQuery’s isNumeric() function
• Validating number ranges
• Performing custom validations

Using jQuery’s isNumeric() Function

jQuery provides a simple and easy-to-use method called isNumeric() to determine if a given value is a number or not. Here’s a basic example of how to use this method:

HTML:

  <meta charset="UTF-8">
  <title>Number Validation Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


  <input type="text" id="number-input">
  <button id="validate-btn">Validate</button>
  <p id="validation-result"></p>

JavaScript (jQuery):

$(document).ready(function() {
  $('#validate-btn').on('click', function() {
    const inputValue = $('#number-input').val();
    const validationResult = $.isNumeric(inputValue) ? 'Valid Number' : 'Not a valid number';
    $('#validation-result').text(validationResult);
  });
});

In this example, we first grab the input value from the #number-input element. Next, we check if the value is a number using the $.isNumeric() function. Finally, we display the validation result in the #validation-result element.

Validating Number Ranges

Sometimes, you may need to validate if a number falls within a specific range. You can easily achieve this by extending our previous example with a few more lines of code. Let’s say we want to validate if the input is a number between 10 and 50:

$(document).ready(function() {
  $('#validate-btn').on('click', function() {
    const inputValue = $('#number-input').val();
    let validationResult;

    if ($.isNumeric(inputValue)) {
      const numValue = parseFloat(inputValue);
      if (numValue >= 10 && numValue <= 50) {
        validationResult = 'Valid Number (between 10 and 50)';
      } else {
        validationResult = 'Number not within range (10-50)';
      }
    } else {
      validationResult = 'Not a valid number';
    }

    $('#validation-result').text(validationResult);
  });
});

Performing Custom Validations

You can also perform custom validations on your input numbers. For example, let’s say you want to ensure the input number is an even number:

$(document).ready(function() {
  $('#validate-btn').on('click', function() {
    const inputValue = $('#number-input').val();
    let validationResult;

    if ($.isNumeric(inputValue)) {
      const numValue = parseFloat(inputValue);
      if (numValue % 2 === 0) {
        validationResult = 'Valid Number (even)';
      } else {
        validationResult = 'Number is not even';
      }
    } else {
      validationResult = 'Not a valid number';
    }

    $('#validation-result').text(validationResult);
  });
});

As you can see, jQuery makes it effortless to perform number validation in your web applications. With the isNumeric() function and some custom logic, you can easily validate user input and ensure that only valid numbers are processed by your application.