How to make maxlength validation with count remaining character in Bootstrap?

Today now in this post i will show you How to make maxlength validation with count remaining character in Bootstrap? Here i am going to give you an example of How we can display remaining textarea or input characters by using bootstrap plugin.

We know Bootstrap is provide the several types of plugin for input, label, textarea, select box etc and also for the validation. So for the maxlength validation, Bootstrap is provide a really amazing plugin as “bootstrap-maxlength.min.js”.

By using maxlength.js we can count the remaining characters of input box. So we can also change the color of background and also we can change text message of remaining the characters.

Here I had added a very simple example to use that plugin. So, let’s check bellow example:

Example:
<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap Maxlength</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>


	<form>
		<div class="form-group">
			<label>Name:</label>
			<input type="text" name="name" class="form-control" >
		</div>
		<div class="form-group">
			<label>Details:</label>
			<textarea class="form-control" maxlength="100"></textarea>
		</div>
		<div class="form-group">
			<button class="btn btn-success">Submit</button>
		</div>
	</form>


	<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
        });
	</script>


</body>
</html>

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →