Bootstrap – Jquery Plugin to Count Characters and Validate maximum length of the field

In this post i am going to share Simple Bootstrap Plugin which help you to show a visual feedback to the user about the maximum length of the field where the user is typing text.

In this Plugin Uses the HTML5 attribute “maxlength” to work.

Below I added very simple example 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>Bootstrap MaxLength</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="160"></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>

For More Information and future updates : Visit their official github repository

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *