Edit in JSFiddle

/**
 * Characters limit exceeded warning with a simple jQuery plugin
 * @copyright Copyright 2013-2015 Joan claret
 * @license   MIT
 * @author    Joan Claret Teruel <dpam23 at gmail dot com>
 * Licensed under The MIT License (MIT).
 * Copyright (c) Joan Claret Teruel <dpam23 at gmail dot com>
 
 */

;(function($, document, window, undefined) {

  'use strict';
  
  var maxCharWarning = 

    $.fn.maxCharWarning = function() {

        return this.each(function() {
          var el                 = $(this),
              maxLength             = el.data('max-length'),
              warningContainerClass   = el.data('max-length-warning-container'),
              warningContainer  = $('.'+warningContainerClass),
              maxLengthMessage      = el.data('max-length-warning')
          ;
          el.keyup(function() {
            var length = el.val().length;      
            if (length >= maxLength & warningContainer.is(':empty')){
              warningContainer.html(maxLengthMessage);
              el.addClass('input-error');
            }
            else if (length < maxLength & !(warningContainer.is(':empty'))) {
              warningContainer.html('');
              el.removeClass('input-error');
            }
         });
     });
  };
})(window.jQuery || window.$, document, window);


/**
 * Export as a CommonJS module
 */
if (typeof module !== 'undefined' && module.exports) {
    module.exports = maxCharWarning;
}

 $(document).ready(function(){
        $('.js-max-char-warning').maxCharWarning();
    });

.input-error{
    box-shadow: 0 0 5px red;
	border: 1px solid red;
}
.name{
    font-size:12px;
    color:red;
}

<input 
           class ="js-max-char-warning" 
           placeholder="なにか書いてね" 
           type="text" 
           data-max-length-warning="10文字以内でおねがいします" 
           data-max-length="10" 
           data-max-length-warning-container="name"
    /> 
    <span class="name"></span><!-- Display warning message here -->