Field length feedback

by Renoir Boulanger

HTML

<link rel="stylesheet" href="https://www.theinstitutes.org/includes/javascripts/yui/2.9.0/build/assets/skins/sam/skin.css">
<link rel="stylesheet" href="https://www.theinstitutes.org/includes/styles/styles.css">
<link rel="stylesheet" href="https://www.theinstitutes.org/includes/javascripts/yui/2.9.0/build/menu/assets/skins/sam/menu.css">
<script src="&quot;https://www.theinstitutes.org/cloudflare/underscore.js/1.3.3/underscore-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="editorPanHldr" class="yui-module yui-overlay yui-panel" style="visibility: inherit; width: 300px;"><a class="container-close" href="#"></a>
    <div class="hd" style="cursor: move;" id="editorPanHldr_h">
        <div class="tl"></div><span>Editing Password</span>
        <div class="tr"></div>
    </div>
    <div class="bd">
        <div align="center" id="updatePasswordInfo" style="color:#002b5c !important; padding-bottom:8px; font-weight:bold;"></div>
        <div style="text-align:right;">
            <form id="editorForm" name="editorForm">
                <div style="text-align:right; padding-right:10px;">
                    <label style="padding-right:5px;">Password:</label>
                    <input type="password" id="PASS1" name="PASS1" class="FrmInpt" style="width:150px;" alt="All passwords are case sensitive and must be between 8 and 16 characters long." title="All passwords are case sensitive and must be between 8 and 16 characters long.">
                </div>
                <div style="text-align:right; padding-right:10px;">
                    <label style="padding-right:5px;">Confirm Password:</label>
                    <input type="password" id="PASS2" name="PASS2" class="FrmInpt" style="width:150px;" maxlength="16" alt="All passwords are case sensitive and must be between 8 and 16 characters long." title="All passwords are case sensitive and must be between 8 and 16 characters long.">
                </div>
...

CSS

body {
    padding:20px;
}
body > div {
    margin:20px auto;
}

JavaScript

jQuery.noConflict();

jQuery(document).ready(function(){
    jQuery('body').on('keyup focus keypress','.FrmInpt', function(){
        var idString = jQuery(this).attr('id');
        charcntinfo(idString, 'passCharInfo', 16, 8);
        console.log(idString);
    });
    jQuery('body').on('blur', '.FrmInpt', function(){
       clrcharcntinfo('passCharInfo'); 
    });
    jQuery('body').on('click', '.help', function() {
       helpPASS(); 
    });     
});

function helpPASS() { /* not needed to implement */ }
function runChangePassword(event){ /* not needed to implement */ }

/**
 * Character counter feedback helper
 *
 * Recommended usage:
 * 1. On the input field, add a class name to a field you want to have character count feedback, e.g. 'behavior-charcnt', if already a class name, add a space and a new class name
 * 2. On the input field, set maxlength property according to what you want, e.g. maxlength="45"
 * 3. Add within a document ready function the following
 * {code}
 *   jQuery(document).ready(function(){
 *       jQuery('body').on('keyup focus', '.behavior-charcnt', function(){
 *       });
 *
 *   });
 * {code}
 * NOTE: Requires jQuery 1.7+
 *
 * @author Renoir Boulanger <[email protected]>
 * @since  2013-07-12 01
 **/
function charcntinfo(fieldIdWithoutHash, msgLocIdWithoutHash, maxLength, minLength){
    // Message feedback helper, author Renoir Boulanger <[email protected]> 2013-07-11
    //console.log(fieldIdWithoutHash); // Debug
    var field = jQuery('#'+fieldIdWithoutHash),
        fieldLen = field.val().length,
        msgNode = jQuery('#'+msgLocIdWithoutHash),
        msgTemplateNode = jQuery('<span style="font-weight:bold; font-size:11px;"></span>'),
        messages = [],
        msg,
        msg2,
        toAppend = (jQuery('#'+fieldIdWithoutHash).data('prepend')) ? jQuery('#'+fieldIdWithoutHash).data('prepend')+' ' : '',
        msgIndex = 1,
        msgColor = 0,
        minLen = parseInt(minLength) || 0,
        maxLen =...