jQuery plugin to validate the maximum length of the field and count characters.

Generic placeholder image
Brijpal Sharma
html css  

Date:-April 30th, 2019 , Posted On:- Web Development


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.

jQuery plugin to validate the maximum length of the field and count characters.

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.

<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>

Now, here we completed tutorials on jQuery plugin to validate the maximum length of the field and count characters.

good luck


About the author

user profile
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...

0 comments

You must be logged in to post a comment.