Javascript Bootstrap - Textarea count characters validation with example

Posted 7 years ago By Ajay Gupta 38166

In this example, I will tell you how to implement character count and apply validation for maximum character length in textarea.

This is very useful to let you know how many characters you type into the field.

For example, for SMS field you know what limitation is required to send message by using SMS Api, there you can apply the max length validation.

You can customize the text message of remaining characters as well you can customize their position.

Bootstrap Maxlength is a very awesome jQuery plugin to validate character count on client side.

Let's have a example :

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Maxlength Validation with Example</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-maxlength/1.7.0/bootstrap-maxlength.min.js"></script>
</head>
<body>
<div class="row">
 <div class="col-md-offset-3 col-md-6">
        <div class="form-group">
            <textarea class="form-control" placeholder="Type here to see how it work" maxlength="100"></textarea>
        </div>
 </div>
</div>
    <script type="text/javascript">
        $('textarea').maxlength({
              alwaysShow: true,
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap Maxlength Validation with Example</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-maxlength/1.7.0/bootstrap-maxlength.min.js"></script>
</head>
<body>
<div class="row">
 <div class="col-md-offset-3 col-md-6">
		<div class="form-group">
			<textarea class="form-control" placeholder="Type here to see how it work" maxlength="100"></textarea>
		</div>
 </div>
</div>
	<script type="text/javascript">
		$('textarea').maxlength({
              alwaysShow: true,
        });
	</script>

</body>
</html>

Now we will change the position of counter at top left, you can place the counter indicator on top-right, bottom-left etc.

    <script type="text/javascript">
        $('textarea').maxlength({
              alwaysShow: true,             
              placement: 'top-left'
        });
    </script>

	<script type="text/javascript">
		$('textarea').maxlength({
              alwaysShow: true,	         
	          placement: 'top-left'
        });
	</script>

You can also customize the message by following way:

<script type="text/javascript">
        $('textarea').maxlength({
              alwaysShow: true,
              threshold: 10,
              warningClass: "label label-success",
              limitReachedClass: "label label-danger",
              separator: ' out of ',
              preText: 'You write ',
              postText: ' chars.',
              validate: true,
              placement: 'bottom-left'
        });
    </script>

<script type="text/javascript">
		$('textarea').maxlength({
              alwaysShow: true,
	          threshold: 10,
	          warningClass: "label label-success",
	          limitReachedClass: "label label-danger",
	          separator: ' out of ',
	          preText: 'You write ',
	          postText: ' chars.',
	          validate: true,
	          placement: 'bottom-left'
        });
	</script>

Show Demo

Javascript Bootstrap - Textarea count characters validation with example

Javascript Bootstrap - Textarea count characters validation with example

Tags :

Related Posts

Laravel 5 - confirmation box for delete a member from database example

How to use Bootstrap Tags input jQuery plugin with example

Bootstrap 5 star rating example using jQuery star rating plugin

Bootstrap Validator to validate open and close time with callback