June 17, 2023
Category : Bootstrap
jQuery
Bootstrap Maxlength Validation with Count Remaining Characters Example
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:
Preview:
Example:
Read Also: How to Add Lazy Loading Image using JQuery?
<!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>
Ok, now you can simply run bellow example.
Maybe it can help you.
;void(0);){kind=link}
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. 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, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
Subscribe me on: Youtube
;void(0);){kind=link}