├── README.md
├── bower.json
├── demo
    ├── css
    │   └── styles.css
    ├── index.html
    └── js
    │   └── jquery.maxcharwarning.js
├── jquery.maxcharwarning.js
├── jquery.maxcharwarning.min.js
└── package.json


/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | ![Plugin preview](http://joanclaret.github.io/host/max-char-limit-warning.png)
  3 | 
  4 | Maximum Characters limit exceeded warning
  5 | ========================================
  6 | Get a warning when the maximum char limit has been exceeded with a simple jQuery plugin
  7 | 
  8 | * Only 1 js file
  9 | * < 1Kb minified (495 bytes)
 10 | * Easy to implement
 11 | * Works with inputs, textareas.
 12 | 
 13 | [![npm version](https://badge.fury.io/js/max-char-limit-warning.svg)](https://badge.fury.io/js/max-char-limit-warning) [![Join the chat at https://gitter.im/JoanClaret/max-char-limit-warning](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/JoanClaret/max-char-limit-warning?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 14 | 
 15 | Online demo
 16 | -----------
 17 | 
 18 | [Visit codepen](http://codepen.io/joanclaret/pen/XmwLVP).
 19 | 
 20 | 
 21 | Installation
 22 | -----------
 23 | 
 24 | ### 1. Grab a copy of the plugin
 25 | 
 26 | Using bower
 27 | 
 28 | ```bash
 29 | bower install max-char-limit-warning --save-dev
 30 | ```
 31 | 
 32 | Using npm
 33 | 
 34 | ```bash
 35 | npm install max-char-limit-warning --save-dev
 36 | ```
 37 | 
 38 | or [download the plugin](https://github.com/JoanClaret/max-char-limit-warning/archive/master.zip) from GitHub
 39 | 
 40 | 
 41 | ### 2. Load the required javascript files
 42 | 
 43 | 
 44 | Load them in the html
 45 | 
 46 | ```html
 47 | <!-- jQuery library (served from Google) -->
 48 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 49 | 
 50 | <!-- jcSlider Javascript file -->
 51 | <script src="jquery.maxcharwarning.min.js"></script>
 52 | ```
 53 | 
 54 | or use Browserify
 55 | 
 56 | ```javascript
 57 | require('maxCharWarning');
 58 | ```
 59 | 
 60 | 
 61 | ### 3. Create the HTML markup
 62 | 
 63 | ```html
 64 |     <input 
 65 |            class ="js-max-char-warning" 
 66 |            placeholder="Your name" 
 67 |            type="text" 
 68 |            data-max-length-warning="limit exceeded" 
 69 |            data-max-length="10" 
 70 |            data-max-length-warning-container="name"
 71 |     /> 
 72 |     <span class="name"></span><!-- Display warning message here -->
 73 | ```
 74 | 
 75 | ### 4. Initialize the plugin
 76 | 
 77 | Default initialization
 78 | 
 79 | ```javascript
 80 | <script type="text/javascript">
 81 |     $(document).ready(function(){
 82 |         $('.js-max-char-warning').maxCharWarning();
 83 |     });
 84 | </script>
 85 | ```
 86 | 
 87 | 
 88 | ### Follow the repository
 89 | ★ Star and watch [this repo](https://github.com/JoanClaret/max-char-limit-warning) in order to stay updated with news about this plugin
 90 | 
 91 | 
 92 | ### Other useful  plugins
 93 | * [jcSlider](http://joanclaret.github.io/jcSlider): A responsive slider jQuery plugin with CSS animations 
 94 | * [html5 canvas animation](http://joanclaret.github.io/html5-canvas-animation): 3D lines animation with three.js 
 95 | * [slide and swipe menu](http://joanclaret.github.io/slide-and-swipe-menu): A sliding swipe menu that works with touchSwipe library. 
 96 | * [jquery dynamic max height](http://joanclaret.github.io/jquery-dynamic-max-height) : Dynamic max height plugin for jQuery with CSS animation
 97 | 
 98 | 
 99 | License
100 | -------
101 | 
102 |     The MIT License (MIT)
103 | 
104 |     Copyright (c) 2015 Joan Claret
105 | 
106 |     Permission is hereby granted, free of charge, to any person obtaining a copy
107 |     of this software and associated documentation files (the "Software"), to deal
108 |     in the Software without restriction, including without limitation the rights
109 |     to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
110 |     copies of the Software, and to permit persons to whom the Software is
111 |     furnished to do so, subject to the following conditions:
112 | 
113 |     The above copyright notice and this permission notice shall be included in
114 |     all copies or substantial portions of the Software.
115 | 
116 |     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
117 |     IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
118 |     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
119 |     AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
120 |     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
121 |     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
122 |     THE SOFTWARE.
123 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "max-char-limit-warning",
 3 |   "version": "1.0.2",
 4 |   "homepage": "https://github.com/joanclaret/max-char-limit-warning",
 5 |   "authors": [
 6 |     "Joan Claret <dpam23@gmail.com>"
 7 |   ],
 8 |   "description": "Get a warning when the maximum char limit has been exceeded with a simple jQuery plugin",
 9 |   "main": "jquery.maxcharwarning.min.js",
10 |   "dependencies": {
11 |     "jquery": ">=1.4.0"
12 |   },
13 |   "keywords": [
14 |     "characters",
15 |     "limit",
16 |     "warning",
17 |     "form",
18 |     "input",
19 |     "jQuery",
20 |     "plugin",
21 |     "jquery-plugin",
22 |     "ecosystem:jquery"
23 |   ],
24 |   "license": "MIT",
25 |   "ignore": [
26 |     "**/.*",
27 |     "node_modules",
28 |     "bower_components",
29 |     "test",
30 |     "tests"
31 |   ]
32 | }
33 | 


--------------------------------------------------------------------------------
/demo/css/styles.css:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * Setup
 4 |  */
 5 | *{
 6 |   margin:0;
 7 |   box-sizing: border-box;
 8 |   outline:none;
 9 | }
10 | 
11 | body{
12 |   font-family: 'Lato', sans-serif;
13 |   padding:20px;
14 |   font-size:16px;
15 |   line-height:1.8em;
16 |   background: #2ecc71;
17 |   background: -moz-linear-gradient(-45deg,  #2ecc71 0%, #3498db 100%);
18 |   background: -webkit-linear-gradient(-45deg,  #2ecc71 0%,#3498db 100%);
19 |   background: linear-gradient(135deg,  #2ecc71 0%,#3498db 100%);
20 |   min-height:100vh;
21 |   color:#fff;
22 | }
23 | .container{
24 |     max-width:1280px;
25 |     margin:0 auto;
26 | }
27 | h1{
28 |   font-family: 'Oswald', sans-serif;
29 |   font-size:40px;
30 |   line-height:1.4em;
31 |   font-weight:normal;
32 | }
33 | h2{
34 |   font-weight:normal;
35 |   margin-top:.5em;
36 |   margin-bottom:1em;
37 | }
38 | p{
39 |   
40 | }
41 | a{
42 |   color:#fff;
43 | }
44 | ul{
45 |   list-style:none;
46 |   padding:0;
47 | }
48 | li{
49 |   margin-bottom:2em;
50 | }
51 | pre{
52 |   margin-top:5px;
53 |   font-size:14px;
54 |   line-height:1.5em;
55 | }
56 | strong{
57 |   color:#34495e;
58 | }
59 | .input-error{
60 |   border:2px solid red;
61 | }
62 | input{
63 |   padding:10px;
64 |   border:2px solid transparent;
65 |   border-radius:4px;
66 |   font-size:16px;
67 | }
68 | footer{
69 |   text-align:center;
70 |   padding:20px;
71 | }
72 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <title>Maximum Characters limit exceeded warning</title>
 5 |         <meta charset="utf-8">
 6 |         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 7 |         <!-- DEMO CSS stylesheet -->
 8 |         <link rel="stylesheet" href="css/styles.css">
 9 |         <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald">
10 |         <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato">
11 | 
12 |         <!-- jQuery file-->
13 |         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
14 | 
15 |         <!-- Max char warning main javascript file -->
16 |         <script src="js/jquery.maxcharwarning.js"></script>
17 |         
18 |     </head>
19 |     <body>
20 |         <div class="container">
21 |             <h1>Get a warning when the maximum char limit has been exceeded with a simple jQuery plugin</h1>
22 |             <h2>Configurable max length and warning message using data atributes</h2> 
23 | 
24 |             <ul>
25 |               <li>
26 |                 <input 
27 |                        class ="js-max-char-warning" 
28 |                        data-max-length-warning="limit exceeded" 
29 |                        data-max-length="10" 
30 |                        data-max-length-warning-container="name"
31 |                        placeholder="Your name" 
32 |                        type="text" 
33 |                 /> 
34 |                 <span class="name"></span>
35 |                 <pre>data-max-length-warning="<strong>limit exceeded</strong>"<br />data-max-length="<strong>10</strong>"</pre>
36 |               </li>
37 |               <li>
38 |                 <input 
39 |                        class ="js-max-char-warning" 
40 |                        data-max-length-warning="Max 15 characters" 
41 |                        data-max-length="15" 
42 |                        data-max-length-warning-container="address"
43 |                        placeholder="Your name" 
44 |                        type="text" 
45 |                 /> 
46 |                 <span class="address"></span>   
47 |                 <pre>data-max-length-warning="<strong>Max 15 characters</strong>"<br />data-max-length="<strong>15</strong>"</pre>  
48 |               </li>
49 |             </ul>  
50 | 
51 | 
52 |             <footer>
53 |               <p>Discover more things at: <br />
54 |                <a title="Joan Claret: Front-end developer" href="http://joanclaret.github.io/" target="_blank">
55 |                  http://joanclaret.github.io/ 
56 |               </a></p>
57 |             </footer>
58 |         </div>
59 | 
60 |         <script type="text/javascript">
61 |         $(document).ready(function(){
62 |             $('.js-max-char-warning').maxCharWarning();
63 |         });
64 |         </script>
65 | 
66 |     </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/demo/js/jquery.maxcharwarning.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Characters limit exceeded warning with a simple jQuery plugin
 3 |  *
 4 |  * @copyright Copyright 2013-2015 Joan claret
 5 |  * @license   MIT
 6 |  * @author    Joan Claret Teruel <dpam23 at gmail dot com>
 7 |  *
 8 |  * Licensed under The MIT License (MIT).
 9 |  * Copyright (c) Joan Claret Teruel <dpam23 at gmail dot com>
10 |  *
11 |  * Permission is hereby granted, free of charge, to any person obtaining a copy
12 |  * of this software and associated documentation files (the "Software"), to deal
13 |  * in the Software without restriction, including without limitation the rights
14 |  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15 |  * copies of the Software, and to permit persons to whom the Software is
16 |  * furnished to do so, subject to the following conditions:
17 |  *
18 |  * The above copyright notice and this permission notice shall be included in
19 |  * all copies or substantial portions of the Software.
20 |  *
21 |  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22 |  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23 |  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24 |  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25 |  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26 |  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
27 |  * THE SOFTWARE.
28 |  */
29 | 
30 | ;(function($, document, window, undefined) {
31 | 
32 |   'use strict';
33 |   
34 |   var maxCharWarning = 
35 | 
36 |     $.fn.maxCharWarning = function() {
37 | 
38 |         return this.each(function() {
39 |           var el                 = $(this),
40 |               maxLength             = el.data('max-length'),
41 |               warningContainerClass   = el.data('max-length-warning-container'),
42 |               warningContainer  = $('.'+warningContainerClass),
43 |               maxLengthMessage      = el.data('max-length-warning')
44 |           ;
45 |           el.keyup(function() {
46 |             var length = el.val().length;      
47 |             if (length >= maxLength & warningContainer.is(':empty')){
48 |               warningContainer.html(maxLengthMessage);
49 |               el.addClass('input-error');
50 |             }
51 |             else if (length < maxLength & !(warningContainer.is(':empty'))) {
52 |               warningContainer.html('');
53 |               el.removeClass('input-error');
54 |             }
55 |          });
56 |      });
57 |   };
58 | })(window.jQuery || window.$, document, window);
59 | 
60 | 
61 | /**
62 |  * Export as a CommonJS module
63 |  */
64 | if (typeof module !== 'undefined' && module.exports) {
65 |     module.exports = maxCharWarning;
66 | }


--------------------------------------------------------------------------------
/jquery.maxcharwarning.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Characters limit exceeded warning with a simple jQuery plugin
 3 |  *
 4 |  * @copyright Copyright 2013-2015 Joan claret
 5 |  * @license   MIT
 6 |  * @author    Joan Claret Teruel <dpam23 at gmail dot com>
 7 |  *
 8 |  * Licensed under The MIT License (MIT).
 9 |  * Copyright (c) Joan Claret Teruel <dpam23 at gmail dot com>
10 |  *
11 |  * Permission is hereby granted, free of charge, to any person obtaining a copy
12 |  * of this software and associated documentation files (the "Software"), to deal
13 |  * in the Software without restriction, including without limitation the rights
14 |  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15 |  * copies of the Software, and to permit persons to whom the Software is
16 |  * furnished to do so, subject to the following conditions:
17 |  *
18 |  * The above copyright notice and this permission notice shall be included in
19 |  * all copies or substantial portions of the Software.
20 |  *
21 |  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22 |  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23 |  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24 |  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25 |  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26 |  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
27 |  * THE SOFTWARE.
28 |  */
29 | 
30 | ;(function($, document, window, undefined) {
31 | 
32 |   'use strict';
33 |   
34 |   var maxCharWarning = 
35 | 
36 |     $.fn.maxCharWarning = function() {
37 | 
38 |         return this.each(function() {
39 |           var el                 = $(this),
40 |               maxLength             = el.data('max-length'),
41 |               warningContainerClass   = el.data('max-length-warning-container'),
42 |               warningContainer  = $('.'+warningContainerClass),
43 |               maxLengthMessage      = el.data('max-length-warning')
44 |           ;
45 |           el.keyup(function() {
46 |             var length = el.val().length;      
47 |             if (length >= maxLength & warningContainer.is(':empty')){
48 |               warningContainer.html(maxLengthMessage);
49 |               el.addClass('input-error');
50 |             }
51 |             else if (length < maxLength & !(warningContainer.is(':empty'))) {
52 |               warningContainer.html('');
53 |               el.removeClass('input-error');
54 |             }
55 |          });
56 |      });
57 |   };
58 | })(window.jQuery || window.$, document, window);
59 | 
60 | 
61 | /**
62 |  * Export as a CommonJS module
63 |  */
64 | if (typeof module !== 'undefined' && module.exports) {
65 |     module.exports = maxCharWarning;
66 | }


--------------------------------------------------------------------------------
/jquery.maxcharwarning.min.js:
--------------------------------------------------------------------------------
1 | !function(n,t,a,e){"use strict";n.fn.maxCharWarning=function(){return this.each(function(){var t=n(this),a=t.data("max-length"),e=t.data("max-length-warning-container"),r=n("."+e),i=t.data("max-length-warning");t.keyup(function(){var n=t.val().length;n>=a&r.is(":empty")?(r.html(i),t.addClass("input-error")):a>n&!r.is(":empty")&&(r.html(""),t.removeClass("input-error"))})})}}(window.jQuery||window.$,document,window),"undefined"!=typeof module&&module.exports&&(module.exports=maxCharWarning);


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "max-char-limit-warning",
 3 |   "version": "1.0.2",
 4 |   "description": "Get a warning when the maximum char limit has been exceeded with a simple jQuery plugin",
 5 |   "main": "jquery.maxcharwarning.min.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/joanclaret/max-char-limit-warning.git"
 9 |   },
10 |   "keywords": [
11 |     "characters",
12 |     "limit",
13 |     "warning",
14 |     "form",
15 |     "input",
16 |     "jQuery",
17 |     "plugin",
18 |     "jquery-plugin",
19 |     "ecosystem:jquery"
20 |   ],
21 |   "author": {
22 |     "name": "Joan Claret",
23 |     "url": "https://github.com/JoanClaret"
24 |   },
25 |   "licenses": [
26 |     {
27 |       "type": "MIT"
28 |     }
29 |   ],
30 |   "bugs": {
31 |     "url": "https://github.com/JoanClaret/max-char-limit-warning/issues"
32 |   },
33 |   "homepage": "https://github.com/JoanClaret/max-char-limit-warning",
34 |   "dependencies": {
35 |     "jquery": ">=1.4.0"
36 |   }
37 | }


--------------------------------------------------------------------------------