Character count validation while typing using JavaScript

Character count validation while typing using JavaScript
July 27, 2021

When we have to restrict the user while typing a short description or summary in the form we need to validate characters and notify the user.

Here we will show the current character count when the user types and if it exceeds 50 characters we will show the count in red color to show the character limit is exceeded.

1.Add Bootstrap files

To save designing time here I am using bootstrap. So first step is to add bootstrap files to your code.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



2.Design form

Here I have designed a simple form that contains a text area with character count.

  <div class="container">
        <div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"><h1>Character Count Validation</h1></div><form><div class="form-group"><label for="summary">Summary</label><textarea class="form-control" id="summary" name="summary" cols="30" rows="10" onkeyup="validateSummary()" placeholder="Type here..."></textarea></div><div class="text-secondary text-right"><span id="char_count">0</span>/50</div></form>
 </div>

3. Add JavaScript

When the user enters the summary validatedSummary function gets called and it checks the character count of the summary and updates the character count in the form. If the text exceeds 50 characters then it shows the current character count in red color.

 function validateSummary(){
    const summary = document.querySelector("#summary").value;
    const summaryLength = summary.length;

    const element = document.querySelector("#char_count");
    element.innerHTML = summaryLength;

    if(summaryLength > 50){
        element.classList.add("text-danger");
    }
    else {
        element.classList.remove("text-danger");
    }
}

You can add more logic into it like stopping the user while typing when character limits exceed and show an error alert to him.


Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Master JavaScript by Solving Daily Challenges

Challenge Yourself Daily: Advance Your JavaScript Skills and Career

View Challenges

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates