Javascript Bootstrap - Textarea count characters validation with example

Javascript Bootstrap - Textarea count characters validation with example

In this example, I will tell you how to implement character count and apply validation for maximum character length in textarea.

This is very useful to let you know how many characters you type into the field.

For example, for SMS field you know what limitation is required to send message by using SMS Api, there you can apply the max length validation.

You can customize the text message of remaining characters as well you can customize their position.

Bootstrap Maxlength is a very awesome jQuery plugin to validate character count on client side.

Let's have a example :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Bootstrap Maxlength Validation with Example</title>
  5.     <link rel="stylesheet" type="text/css" href="">
  6.     <script type="text/javascript" src=""></script>
  7.     <script type="text/javascript" src=""></script>
  8.     <script type="text/javascript" src=""></script>
  9. </head>
  10. <body>
  11. <div class="row">
  12. <div class="col-md-offset-3 col-md-6">
  13.         <div class="form-group">
  14.             <textarea class="form-control" placeholder="Type here to see how it work" maxlength="100"></textarea>
  15.         </div>
  16. </div>
  17. </div>
  18.     <script type="text/javascript">
  19.         $('textarea').maxlength({
  20. alwaysShow: true,
  21. });
  22.     </script>
  23. </body>
  24. </html>

Now we will change the position of counter at top left, you can place the counter indicator on top-right, bottom-left etc.

  1.     <script type="text/javascript">
  2.         $('textarea').maxlength({
  3. alwaysShow: true,    
  4.      placement: 'top-left'
  5. });
  6.     </script>

You can also customize the message by following way:

  1. <script type="text/javascript">
  2.         $('textarea').maxlength({
  3. alwaysShow: true,
  4.      threshold: 10,
  5.      warningClass: "label label-success",
  6.      limitReachedClass: "label label-danger",
  7.      separator: ' out of ',
  8.      preText: 'You write ',
  9.      postText: ' chars.',
  10.      validate: true,
  11.      placement: 'bottom-left'
  12. });
  13.     </script>

Phone: (+91) 8800417876
Noida, 201301
sakarya escort sakarya escort bayan sakarya escort serdivan escort sakarya escort sakarya escort serdivan escort
karasu escort akyazı escort serdivan escort akyazı escort ferizli escort sapanca escort serdivan escort söğütlü escort sakarya escort izmit escort arifiye escort erenler escort hendek escort kocaali escort pamukova escort taraklı escort geyve escort