JavaScript Hack to Render Red Bar for Required apex:selectList

I'm surprised that Salesforce doesn't support rendering apex:pageBlockSectionItem elements with the same red bar that identifies a required element.

All I wanted was for ...

... to look like ...

So, for consistency of developing a Visualforce page that has a consistent look-and-feel, I came up with a script snippet that seems to work to add the red bar to any apex:pageBlockSectionItem with the dataStyleClass set to "requiredData".

Here's the code:

/**
 * Add the Salesforce "required" appearance to an 
 * input cell.
 *
 * @param td The input cell to give a "required" 
 *           appearance.
 */
function addRequiredAppearance(td) {
    
    // Construct the wrapper div that goes inside 
    // the td.
    
    var requiredInputDiv = 
            document.createElement("div");

    requiredInputDiv.setAttribute(
            "class", "requiredInput");
    
    // Construct and append the div that renders 
    // as the red bar.
    
    var requiredBlockDiv = 
            document.createElement("div");

    requiredBlockDiv.setAttribute(
            "class", "requiredBlock");

    requiredInputDiv.appendChild(
            requiredBlockDiv);
    
    // Move each child from the td inside the 
    // wrapper div.
    
    while (td.firstChild) {
        requiredInputDiv.appendChild(
                td.removeChild(td.firstChild));
    }   // while (td.firstChild)
    
    // Append the wrapper div inside the td.
    
    td.appendChild(requiredInputDiv);
}   // function addRequiredAppearance(td)

// Iterate through every marked element to add 
// the required appearance.

jQuery(".requiredData").each(function (i) {
    addRequiredAppearance(this);
});

With the desired apex:pageBlockSectionItem elements marked, this code adds the red bar to compliment a Visualforce input element that has the required attribute set to "true".

As mentioned in the discussion thread, Salesforce may at any time change the way they render required fields. Since this was only tested in Winter '12, the hack may not work in a later release if applied as-is. However, the concept should still hold true, and as long as the function is modified appropriately all should be well.

Note: This hack uses the jQuery library for selecting marked elements.

jQuery in Custom Input Components

I'm trying to write my own custom input component that updates values based on button clicks. The component idea is similar to the enhanced jQuery input components created by Joel Dietz, although far less universal in application. An example of Joel's components can be found below.

"enhancedText.component"
sfdcjqueryenhancements

"EnhancedTextController.cls"
sfdcjqueryenhancements

One trick to making the component inputs work is to factor in the quirky DOM ID's generated by Salesforce. This is addressed in the following blog post from Wes Nolte.

"VisualForce Element Ids in jQuery selectors"
The Silver Lining

To clarify Wes's post, the function is defined as follows:

function esc(myid) {
    return '#' + myid.replace(/(:|\.)/g,'\\\\$1');
}

Also, the esc function cannot be called with a literal! The String must be stored in a var first, and the var should then be passed to the esc function.

Whew! I'm not done with my custom input component yet, but I definitely see bright rays of hope.