Skip to content

Instantly share code, notes, and snippets.

@renoirb

renoirb/jsbin.ohufir.html

Created July 17, 2013 22:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save renoirb/6025172 to your computer and use it in GitHub Desktop.
Save renoirb/6025172 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.ohufir.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<script>
jQuery(document).ready(function() {
registerForm('#createAccountForm', createAccountFormHandler);
});
</script>
</head>
<body>
<form id="createAccountForm" name="createAccountForm" action="/account.htm" method="POST">
<fieldset>
<legend>Create Account</legend><table border="0" width="235" align="center" cellpadding="5" cellspacing="0">
<tbody><tr><td align="right" nowrap="nowrap">
<label for="createUsername">Username:</label>
</td><td width="100%">
<input id="createUsername" name="createUsername" type="text" class="behavior-feedback" data-minlength="8" maxlength="19">
</td></tr>
<tr><td align="right" nowrap="nowrap">
<label for="createfname">First Name:</label>
</td><td width="100%">
<input id="createfname" name="createfname" type="text">
</td></tr>
<tr><td align="right" nowrap="nowrap">
<label for="createlname">Last Name:</label>
</td><td width="100%">
<input id="createlname" name="createlname" type="text">
</td></tr>
<tr><td align="right" nowrap="nowrap">
<label for="createEmail">Email Address:</label>
</td><td width="100%">
<input id="createEmail" name="createEmail" type="text" maxlength="50" class="behavior-feedback">
</td></tr>
<tr><td align="right" nowrap="nowrap">
<label for="createPassword">Password:</label>
</td><td width="100%">
<input id="createPassword" name="createPassword" type="password" class="behavior-feedback" maxlength="16" data-minlength="8">
</td></tr>
<tr><td align="right" nowrap="nowrap">
<label for="confirmPassword">Confirm<br>Password:</label>
</td><td width="100%">
<input id="confirmPassword" name="confirmPassword" type="password" class="behavior-feedback" maxlength="16" data-minlength="8">
</td></tr>
<tr><td colspan="2" align="right">
<div id="crePassCharInfo" style="float:left; text-align:left;"></div>
<input type="submit" class="yui-button yui-submit-button" id="btnCreateAccount" value="Create" />
</td></tr>
</tbody></table>
</fieldset>
</form>
</body>
</html>
Raw
jsbin.ohufir.js
window.featureFlagDescriptor = {
createAccountFormFeedback: ['createUsername','createEmail']
};
/**
* Feature flag
*
* Create a global window.featureFlagDescriptor object, and per key, create
* an array of disabled elements. If the element exist in the selected array it will
* return false, otherwise true.
*
* Default expected behavior is to return true in all possible cases, except when it exist.
* EVEN if the global window.featureFlagDescriptor doesnt exist anymore.
*
* @return bool
*
* @author Renoir Boulanger <rboulang@teksystems.com>
* @since 2013-07-15 01
*/
function featureFlag(flagContainerName, elementKeyToCheck) {
// console.log('Feature flagging on '+flagContainerName+', with ' + elementKeyToCheck); // DEBUG
if (_.has(window.featureFlagDescriptor||{}, flagContainerName)) {
if(_.contains(window.featureFlagDescriptor[flagContainerName]||[], elementKeyToCheck)) {
return false;
}
}
return true;
}
/**
* Register a form with an event handler manager
*
* First argument is a CSS selector string, and the second
* argument is a function that will get executed with a jQuery
* object representation given by the selectorString.
*
* Use in a jQuery(document).ready() , and bind all events that needs to be
* handled within the closure.
*/
function registerForm(selectorString, closure) {
closure(jQuery(selectorString));
}
function createAccountFormHandler(domObject)
{
function formSubmitHandler(event){
event.preventDefault();
//console.log('submit disabled'); // DEBUG
}
function fieldFeedbackClearHandler(event) {
jQuery('#crePassCharInfo').text('');
}
function fieldFeedbackHandler(event){
var maxLength = jQuery(this).attr('maxlength') || 50,
minLength = jQuery(this).data('minlength') || null,
elementId = jQuery(this).attr('id') || null;
if(elementId !== null && featureFlag('createAccountFormFeedback', elementId)) {
//console.log('Using on ' + elementId); // DEBUG
charcntinfo(elementId, 'crePassCharInfo', maxLength, minLength);
} else {
jQuery(this).attr('data-featureflag-disabled','true');
}
}
domObject.bind('submit', formSubmitHandler);
domObject.find('.behavior-feedback').each(function (i) {
//console.log(i, jQuery(this).attr('id')); // DEBUG
jQuery(this).bind('keypress focus', fieldFeedbackHandler);
jQuery(this).bind('blur', fieldFeedbackClearHandler);
});
}
/** CODE RE-USE **/
/**
* Character counter feedback helper
*
* @author Renoir Boulanger <rboulang@teksystems.com>
* @since 2013-07-12 02
**/
function charcntinfo(fieldIdWithoutHash, msgLocIdWithoutHash, maxLength, minLength){
// Message feedback helper, author Renoir Boulanger <rboulang@teksystems.com> 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) || 0,
maxLen = parseInt(maxLength, 0);
if (field.attr('maxlength') !== 0 && typeof maxLen !== 0) {
field.attr('maxlength', maxLen);
}
messages.push(["#002B5C", "APPEND Minimum required character limit fulfilled."]);
messages.push(["#900", "APPEND LEN of MIN minimum required characters."]);
messages.push(["#002B5C", "APPEND LEN of MAX characters used."]);
messages.push(["#900", "APPEND Maximum of MAX characters reached."]);
if (fieldLen < minLen && minLen !== 0) {
msgIndex = 1;
} else if (fieldLen == minLen && minLen !== 0) {
msgIndex = 0;
} else if(fieldLen < maxLen) {
msgIndex = 2;
} else if (fieldLen == maxLen) {
msgIndex = 3;
}
//console.log('msg index', msgIndex, 'mesages.length', messages.length, typeof minLen); // DEBUG
msg = messages[msgIndex][1];
msgColor = messages[msgIndex][0];
msg2 = msg.replace(/LEN/, fieldLen).replace(/MAX/, maxLen).replace(/MIN/, minLen).replace(/APPEND /, toAppend);
msgTemplateNode.text(msg2);
msgTemplateNode.css('color', msgColor);
msgNode.children().remove();
msgNode.append(msgTemplateNode);
}
function clrcharcntinfo(obj){
var messageLocationSelector = '#'+obj;
jQuery(messageLocationSelector).children().remove();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment