Required field mark (Red Vertical Bar) not coming

Question

I have created a input text field and want to make this field required and I did it through required attribute. I also want to put red vertical bar in front of text field which is required indicator in salesforce. I did follow code but red bar is not showing -

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

How do I get the red bar to display?

Answer 1

You can "simulate" the redbar like this:

<apex:pageBlock >
    <apex:pageBlockSection>
        <apex:pageBlockSectionItem>
            <apex:outputPanel>
                <div class="requiredInput">
                    <div class="requiredBlock"></div>
                    <apex:inputText value="{!numberOfRowToRemove}"/>
                </div>
            </apex:outputPanel>
        </apex:pageBlockSectionItem>
    </apex:pageBlockSection>
</apex:pageBlock>

Answer 2

It is because you are using inputText. The red bar doesn't come with inputText. You might want to consider inputField to get the bar if the field is an sObject field.

See Visualforce markup used to display a required password field, with field type "password".

Answer 3

Finally i have find out the solution.

            <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>

above code must be wrapped under apex:pageBlockSectionItem tag.