Validate input range in JavaScript with an Example

navya , Credit to  volkotech-solutions Sep 02

Learn how to validate the dynamic input range validations for input type "text, number, & text-area" using JS along with test cases with an alert message.

In this blog, you are going to learn how to create a form with the customized restriction values of form input. So guys, get ready to grab the required code.

For input type the text

Initially, we will start with the most commonly used type of form input field and that is text. Here is the required HTML for the form input type text.



<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="./style.css" />
    <title>Notifies user, when given input range limit exceeds</title>
    <div class="wrapper">
      <h1>Alerts user when exceeds the input range</h1>
        User will be notified when he gives more than the limit of given input
        and the input type may be either text, number or the text with in the
        text area
      <form action="#">
        <div class="input">
          <label for="name">First Name</label>
        <small>Please provide your input less than 10 characters</small>
    <script src="./script.js"></script>

Let us add a few colors to our form to make it more attractive. Here is the required CSS.



body {
  background: #8cdafae0;
.wrapper {
  max-width: 50%;
  margin: 50px auto;
  padding: 20px;
  background: #fff;
  border-radius: 7px;
#textLimit {
  padding: 5px;
  border: 1px solid #bab9b9;
  border-radius: 5px;
  margin: 0 5px;
.input {
  margin: 8px 0 0;
#textLimit:focus {
  outline: none;

After applying CSS, here is the result.

plain input form


Now we will go for the actual functionality, you can use the below code to restrict the input characters for any input field. In the JS file, we are just writing the function and when you observe the HTML file, there we are calling the function and passing the argument values i.e., the required number of characters that you need to limit.


function textLimit(inputType, inputValue) {
  if (inputType.value.length > inputValue) {
    inputType.value = inputType.value.substring(0, inputValue);
    alert("you have crosed the given limit of characters");

Let us conform our functionality with different input values, here is the screenshot for your reference.

showing alert message

In the HTML file, we are calling the function and given the character limit as 10, so the input takes only 10 characters. If we exceed the limit then give the alert message.

For input type number

Now, let us check for the number input type. We don’t need any JS to restrict the number range. We have some input attributes that do the job for us. Here is the required HTML code to achieve the goal.


  <label for="experience">Experience</label>
   <input type="number" id="quantity" name="quantity" min="2" max="4" />
   <input class="submit" type="submit" />
<small>We need only 2 to 4 years of experienced people</small>


Let’s do some CSS for a better look and feel purpose.

.submit {
  background: #419dec;
  border: 0;
  color: #fff;
  font-weight: bolder;
  padding: 8px 46px;
  display: block;
  margin: 15px 0 4px;
  letter-spacing: 1px;
  border-radius: 7px;
#quantity {
  padding: 1px 5px 0 16px;

showing the quantity length

We are limiting the range of numbers from 2 to 4.

Test:1 When the input range is below 2

showing the alert message that user has given more than required range

Test:2 When the input range exceeds 4

test results

Test:3 When the input range is in between the given range

test results

The form will take the input and submits, you can check the submitted value in the top url.

For input type textarea

We have another input field to get the long text from the user. For example, if the user needs to comment, or enter their address we need this textarea input field. If you want to restrict the number of characters in this field, we can do it the same JS code that we did for For input-type text. The only thing we need to do is just a minor change in your HTML files and that is given below.


<textarea name="comments" onKeyDown="textLimit(this,30);"  onKeyUp="textLimit(this,30);"></textarea>
<input class="submit" type="submit" />
<small>Allowed number of characters for this comments is only 30</small>

JS code is already given in the initial step.

You can get all the code on my git page


Hope you got the required information for your requirement. Let me know if you need anything else other than given in the comment section, will follow up soon.



Read Next