jQuery plugin to validate the maximum length of the field and count characters.
This is tips we learn how to use jQuery plugin to validate the maximum length of the field and count characters with bootstrap.
validation is most important for the form where restrict for limitation for word and field. In this post, we learn how to do this thing with the help of jQuery plugin with bootstrap. In this Plugin Uses the HTML5 attribute "maxlength" to work. Below I added very simple example code to use that plugin you can check it and let me know any queries. Now, here we completed tutorials on jQuery plugin to validate the maximum length of the field and count characters. good luck
<html>
<head>
<title>Bootstrap MaxLength - </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap Maxlength Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-maxlength/1.7.0/bootstrap-maxlength.min.js"></script>
</head>
<body>
<div class="container">
<h3>jQuery plugin to validate the maximum length of the field and count characters.</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="inputsm">Mobile</label>
<input class="form-control" id="inputsm" type="text">
</div>
<div class="form-group">
<label for="inputlg">SMS Text</label>
<textarea class="form-control" maxlength="200"></textarea>
</div>
<div class="form-group">
<button class="btn btn-success" type="submit">SEND</button>
</div>
</div>
</div>
</div>
<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>
About the author
Brijpal Sharma
Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...
You must be logged in to post a comment.
You may also be interested in...
Why Enterprises Trust Node.js When it Comes to Deploying Large ApplicationsHow to Make Multi Auth in Laravel 6
Password Confirmation Flow for Logged In Users in Laravel 6.2
Create zip file and download in Laravel
How to Create a fresh Django Project in Pycharm
Django URLs tutorial step by step
Check Mobile Device or Desktop Laravel 5.8
Use Form Validation Using AngularJS and PHP
Use Server Side Datatable Laravel 5.8
Improve Your Website Speed and Performance in Laravel 5.8
