Bootstrap - maxlength validation with count remaining character example

By Hardik Savani | October 11, 2016 | Category : Javascript Bootstrap jQuery

Today, i am going to give you example of How to display remaining textarea or input characters using bootstrap plugin.

Bootstrap provide several types of plugin for input, label, textarea, select box etc and also for validation. So for maxlength validation, Bootstrap provide really amazing plugin "bootstrap-maxlength.min.js".

maxlength.js through we can count remaining characters of input box. We can also change color of background and also change text message of remaining characters.

I had added very simple example to use that plugin so you can check also demo and also run bellow file. So, let's check bellow example:



<!DOCTYPE html>



<title>Bootstrap Maxlength</title>

<link rel="stylesheet" type="text/css" href="">

<script type="text/javascript" src=""></script>

<script type="text/javascript" src=""></script>

<script type="text/javascript" src=""></script>




<div class="form-group">


<input type="text" name="name" class="form-control" >


<div class="form-group">


<textarea class="form-control" maxlength="100"></textarea>


<div class="form-group">

<button class="btn btn-success">Submit</button>



<script type="text/javascript">


alwaysShow: true,

threshold: 10,

warningClass: "label label-success",

limitReachedClass: "label label-danger",

separator: ' out of ',

preText: 'You write ',

postText: ' chars.',

validate: true





Ok, now you can simply run bellow example.

Maybe it can help you.

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: