jQuery plugin to validate the maximum length of the field and count characters.
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...
Fix XAMPP server error xampp-control.ini Access is deniedHow To Solve CORS issue in Laravel and make Laravel CORS Middleware
How To Integrate CKFinder with CKEditor
Show and Edit Dynamic Data In Modal Popup PHP
How To Use Laravel 7 Blade Component [New Feature in Laravel 7]
How To Display A Loader While Sent Request Is In Progress In Vue
Validation Handling In Laravel Vue Error Step By Step
How To Use Tinker To Store Data in Database In Laravel 6
How To Install Vue User Interface and Vue Router in Laravel 6
How to Display multilevel subcategory of a category using JSON in PHP(Laravel)
