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>
-
Brijpal SharmaHi, I am a web developer, I working on Laravel and CodeIgniter framework, I love to share knowledge and tutorials so I here...
0 Comment
You must be logged in to post a comment.
You may also be interested in...
jQuery plugin to validate the maximum length of the field and count characters.Deploy Laravel Application To Shared Hosting The Easy and save Way
Laravel advance search filters with optional fields.
Laravel Migrations: Check if Table/Column Already Exists
Connect Multiple databases in the same Laravel project
SEO tool for Laravel Application
Paypal payment gateway integration in Laravel 5.7 step by step
How to Check User online or not in Laravel
How to keep filter data after the click to next button in Laravel pagination
Which is better for web development, Laravel or Flask?
Top Searched Topics
php java asp.net c sql laravel html css codeigniter wordpress angularjs angular android sqlite vuejs ajax javascript mongodb node.js cloud python react reactjs flask
