Radio button required="true" not displaying an error message when no selection

Question

I've created a Visualforce page to receive input form a user. I've converted a Picklist into a radio button and set it to required.

For whatever reason, the red bar that represents a mandatory field does not display on the form. If I try to submit the form, it will behave as though the radio button is required, but no message is displayed to inform the user. (i.e the page is reloaded with the existing data and won't submit until an option in the radio button is selected)

I've checked the html and the requireBlock/requiredInput classes aren't there, so it's not a display/render issue.

The relevant code:

<apex:selectRadio value="{!cObject.cField__c}" required="true">
        <apex:selectOptions value="{!items}"/>
        <apex:actionSupport event="onchange" reRender="affected_div" />
</apex:selectRadio>

where {!items} refers to a class in my custom controller that creates the selectOptions based on the available picklist values.

Looking at the documentation, the required attribute is supposed to work on the selectRadio element.

Has anyone else come across this behaviour before? If so, was there a solution?

Answer 1

You can do like below. I have made a inputText field required through class="requiredInput" and class="requiredBlock" attribute. You can also do something like that. These classes are salesforce native classes so you don't need to create them. Keep on thing in mind that these classes should be under <apex:outputPanel > tag unless they would not work

        <apex:pageBlockSectionItem >
            <apex:outputLabel value="Name on Card" />
            <apex:outputPanel >
                <div class="requiredInput">
                    <div class="requiredBlock"></div>
                    <apex:inputText value="{!name}" label="Name on Card"                     
                    required="true"/>
                </div>
            </apex:outputPanel>
        </apex:pageBlockSectionItem>

Answer 2

this won't address the CSS issue, but does your page have an apex:messages element? The behavior you describe (upon submit, the page re-renders as is until I select the required element) is consistent with a missing messages element.

I vaguely remember having to manually drop in the "required" classes in VF when not using apex:inputField in a pageBlockTable, but it's been a while. I think it likely you don't get that out-of-the-box styling when using selectRadio directly.