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.

Are you looking for a new front-end developer job?

This weekend, start preparing for your dream job with this Interview Kit