Visualforce markup used to display a required password field, with field type “password”

Question

Inside a pageBlock with mode="edit", I'd like to show a required inputField with the type set to "password" instead of "text". When I use inputSecret, even with required="true", it doesn't show the red bar indicating that the field is required.

I've been able to do it with a lot of tags, but I'm thinking that there must be an easier way.

<!-- Extra markup to get the red required line on 
     inputSecret instead of inputField -->
<apex:pageBlockSectionItem >
  <apex:outputLabel value="Password" />
  <apex:outputPanel styleClass="requiredInput" layout="block">
    <apex:outputPanel styleClass="requiredBlock" layout="block" />
    <apex:inputSecret value="{!MyObject__c.Password__c}"
      required="true" />
  </apex:outputPanel>
</apex:pageBlockSectionItem>

Is this actually a bug (that inputSecret doesn't show the red bar)?

Answer 1

It is not a bug in apex:inputSecret. It happens with all non apex:inputField tags, including apex:text. See this post.

The reasoning is that you can use whatever styling you want to indicate that it is required. For example, I have a Force.com Site where I specify that a field (using an apex:inputText) is required, but I use a red asterisk to indicate requiredness visually. If you want the styling from SF you have to use their inputField or follow one of the workarounds for using their style class.

Answer 2

While it's not the cleanest way to do it, it works, and encapsulating it in a compoment will make it feel clean. Bonus points if you add custom CSS to drive the component so it doesn't break during the next release.

Component

<apex:component>
  <apex:attribute name="errorMessage" required="false" type="String" 
    description="Error Message"/>
  <apex:outputPanel styleClass="requiredInput" layout="block">
    <apex:outputPanel styleClass="requiredBlock" layout="block"/>
    <apex:outputPanel styleClass="errorMsg" layout="block" rendered="{!NOT(ISBLANK(errorMessage))}">
      <strong>Error:</strong> {!errorMessage}
    </apex:outputPanel>
  </apex:outputPanel>
</apex:component>

Visualforce Page

<c:RequiredFieldPanel error="{!errorMsg}">
  <apex:componentBody/>
</c:RequiredFieldPanel>