Ransford Okpoti's Dev Notes

<input type="text" id="email" required="true" />

var formUtil = {
     version = '1.0'
}

formUtil.decorator = {}

/**
 * Defines our custom attributes
 */
formUtil.decorator.attributes = [
    "required", "searchable", "info"
]

/**
 * Images used to decorate the form.
 * These must point to images in the application.
 */
formUtil.decorator.img = {
    REQUIRED: 'img/required.gif',
    SEARCH: 'img/search.gif',
    INFO: 'img/info.png'
}

formUtil.decorator.templates = {
    DEFAULT: new Template('<span id="#{id}"><img src="#{imgSrc}" style="vertical-align:top"></span>'),
    INFO : new Template('<span id="#{id}"><img alt="Info" src="#{imgSrc}" style="vertical-align:top" onmouseover="Tip(\'#{title}\',SHADOW, true,STICKY, 1, CLICKCLOSE, true,DELAY, 1000)" onmouseout="UnTip()"></span>'),
    LINK:  new Template('<span id="#{id}"><a href="javascript:#{fn}"><img src="#{imgSrc}" style="vertical-align:top;border:0"></a></span>')
}

/**
 * Layout arrangment for grouped controls like checkboxes or radio buttons.
 */
formUtil.decorator.layout ={
    HORIZONTAL: 'horizontal',
    VERTICAL: 'vertical'
}

/**
 * Default configuration options which may be overriden by the user
 */
formUtil.decorator.cfgDefaults = {
    renderRequired: true,
    renderSearchable: true,
    renderInfo: true,
    searchable: {
        clickable: false,
        fn: 'void(0)' // function to be clicked when clickable is set to true
    }
}

/**
 * @param
 */
formUtil.decorator.decorateForm = function(form, cfgOptions){
    // Iterating through all the elements/controls in each form
    for(var j=0, k=form.elements.length; j<k ; j++){
        var elem = form.elements[j];
 
        var isDecoratable = false;
        for(var i in this.attributes){
            if($(elem).readAttribute(this.attributes[i])!==null){
                isDecoratable = true;
                break;
            }
        }
 
        if(!isDecoratable) continue
 
        var uniqueId = ( elem.id || elem.name);
 
        // ids for the icons displayed beside each field
        for(i in this.attributes){
            attribute = this.attributes[i];
            if(typeof attribute=='string'){
                var str = 'var ' + attribute + 'Id="' + uniqueId + '_' + attribute+'";';
                eval(str);
            }
        }
 
        /**
         * The element besides which the various decorators
         * will be rendered. This will normally be the element with any of
         * the custom attributes, expect in grouped controls, such as checkboxes,
         * or radio buttons, where the rendering element may either be the first
         * or last control in the group depending on the layout arrangement.
         */
        var renderingEl = elem;
        var numOptions = document.getElementsByName(elem.name).length;
        var layout = $(elem).readAttribute("layout") || this.layout.HORIZONTAL;
        layout = layout.toLowerCase();
 
        if(numOptions>1){ // it's either a radio button or a checkbox
            // if the options are arranged horizontally, then the last option
            // in the list is used.
            if(layout==this.layout.HORIZONTAL)
                renderingEl = document.getElementsByName(elem.name)[numOptions-1];
            else
                renderingEl = elem;
            renderingEl=renderingEl.next();
        }
 
        if(cfg.renderInfo && $(elem).readAttribute("info")!==null){
            renderingEl.insert({after: formUtil.decorator.templates.INFO.evaluate({ id:infoId, imgSrc:this.img.INFO, title:$(elem).readAttribute("info") })});
            renderingEl=renderingEl.next();
        }
 
        if(cfg.renderRequired && $(elem).readAttribute("required")=="true"){
            renderingEl.insert({after: formUtil.decorator.templates.DEFAULT.evaluate({ id:requiredId, imgSrc:this.img.REQUIRED })});
            renderingEl=renderingEl.next();
        }
 
        if($(elem).readAttribute("searchable")=="true"){
            if(cfg.searchable.clickable){
                renderingEl.insert({after: formUtil.decorator.templates.LINK.evaluate({ id:searchableId, fn:cfg.searchable.fn, imgSrc:this.img.SEARCH })});
            }
            else{
                renderingEl.insert({after: formUtil.decorator.templates.DEFAULT.evaluate({ id:searchableId, imgSrc:this.img.SEARCH })});
            }
        }
    }
}

/**
 * Decorates a forms elements having the custom attributes
 * required, searchable, and info.
 * @example
 * 1. formUtil.decorator.decorate(); // default config applies
 *
 * 2. formUtil.decorator.decorate({renderInfo: false}); // overrides renderInfo
 */
formUtil.decorator.decorate = function(cfgOptions){
    var userCfg = cfgOptions || {};
    cfg = apply(userCfg, this.cfgDefaults);
 
    // Iterating through all the forms
    for(var i=0,j=document.forms.length; i<j; i++){
        this.decorateForm(document.forms[i], cfg);
    }
}

/**
 * Copies all the non-existent properties in o from defaults
 *
 * @param {Object} o
 * @param {Object} defaults
 * @return {Object}
 */
function apply(o, defaults){
    var no = new Object();
    for(var p in defaults){
        no[p] = o[p] || defaults[p];
    }
 
    return no;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Javascript Form Decorator</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="style.css" >
    </head>
    <body>
        <div class="notice">
            Complete the form and hit the Submit button.<br/>
            You can perform a quick search
            by providing values for searchable fields and click on the Search button.
        </div>
        <form id="applicationForm">
            <fieldset>
                <legend>APPLICATION FORM</legend>
                <p>
                    <label for="name" class="label">Name</label>
                    <input type="text" id="name" info="Official name as appears on the document" required="true" searchable="true" />
                </p>
                <p>
                    <label for="" class="label">Country</label>
                    <input type="text" id="country" required="true" searchable="true"/>
                </p>
                <p>
                    <label for="gender" class="label">Gender</label>
                    <input type="radio" name="gender" id="male" value="M" required="true" searchable="true"/><label for="male">Male</label>
                    <input type="radio" name="gender" id="female" value="F" /><label for="female">Female</label>
                </p>
                <p>
                    <label for="salary" class="label">Salary</label>
                    <input type="text" id="salary" />
                </p>
                <p>
                    <label for="postalAddr" class="label">Postal Address</label>
                    <textarea id="postalAddr" required="true"></textarea>
                </p>
                <p>
                    <label for="preferableCountries" class="label">Choose preferable work countries</label>
                <fieldset>
                    <input type="checkbox" value="gh" name="preferableCountries" id="gh" required="true" layout="Vertical"/><label for="gh">Ghana</label><br/>
                    <input type="checkbox" value="tg" name="preferableCountries" id="tg" /><label for="gh">Togo</label><br/>
                    <input type="checkbox" value="ch" name="preferableCountries" id="ch" /><label for="ch">China</label>
                </fieldset>
                </p>
                <p>
                    <label class="label" ></label>
                    <input type="submit" value="Save" /><input type="submit" value="Search" />
                </p>
            </fieldset>
        </form>
 
        <script type="text/javascript" src="../js/prototype-1.6.0.3.js"></script>
        <script type="text/javascript" src="../js/wz_tooltip/wz_tooltip.js"></script>
        <script type="text/javascript" src="form-util.js"></script>
        <script type="text/javascript">
        /*<![CDATA[*/
            window.onload = function(){
                form.decorateForm({searchable:{clickable:true, fn:'doSearch()'}});
                //form.decorateForm();
            }
            function doSearch(){
                console.info('Performing search...');
            }
        /*]]>*/
        </script>
 
    </body>
</html>

/*style.css*/
body{
    font: caption;
    font-size: 12px;
}
 
div.notice {
    border:1px solid orange;
    background: yellow;
    margin-bottom:5px;
    padding:5px;
    font-family:monospace;
}
 
label.label {
    display: block;
    float: left;
    width: 220px;
    text-align: right;
    margin-right: 5px;
    padding: 2px 0;
}
 
fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
 
legend {
    /*font-weight: bold;*/
    margin-bottom: 0px;
    padding: 0px;
}
 
form p{
    margin-top: 1px;
    margin-bottom: 5px;
}