Bootstrap – maxlength validation with count remaining character example
In this post we will give you information about Bootstrap – maxlength validation with count remaining character example. Hear we will give you detail about Bootstrap – maxlength validation with count remaining character exampleAnd how to use it also give you demo for it if it is necessary.
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:
<!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 >
<label>Name:</label>
<input type="text" name="name" >
</div>
<div >
<label>Details:</label>
<textarea maxlength="100"></textarea>
</div>
<div >
<button >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.
Hope this code and post will helped you for implement Bootstrap – maxlength validation with count remaining character 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