Javascript Bootstrap - Textarea Count Characters Validation With Example

Javascript Bootstrap – Textarea count characters validation with example

In this post we will give you information about Javascript Bootstrap – Textarea count characters validation with example. Hear we will give you detail about Javascript Bootstrap – Textarea count characters validation with exampleAnd how to use it also give you demo for it if it is necessary.

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 :

<!DOCTYPEhtml>
<html>
<head>
    <title>Bootstrap Maxlength Validation with Example</title>
    <linkrel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <scripttype="text/javascript"src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-maxlength/1.7.0/bootstrap-maxlength.min.js"></script>
</head>
<body>
<divclass="row">
<divclass="col-md-offset-3 col-md-6">
        <divclass="form-group">
            <textareaclass="form-control"placeholder="Type here to see how it work"maxlength="100"></textarea>
        </div>
</div>
</div>
    <scripttype="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 >
 <div >
		<div >
			<textarea  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.

    <scripttype="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:

<scripttype="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

Label :

HTML

jQuery

How To

Web Development

Bootstrap

JavaScript

Hope this code and post will helped you for implement Javascript Bootstrap – Textarea count characters validation with example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Javascript Bootstrap – Textarea count characters validation with example

Label :

Leave a Comment Cancel Reply