<apex:inputText with required="true" using apex:pageBlockTable

Question

PS: this is not duplicate all others who posted the link is not using the apex:pageBlockTable as i appose to using in this question, the links you guys have posted are using apex:pageBlockSection

I have a page that defines an inputText with required="true" but when the page renders, the input box doesn't have the red bar indicating that it's required.

Screen shot:

Tried with apex:inputField as well.

<apex:pageBlockTable value="{!pWraps}" var="pWrap" id="pResults" rendered="{!pWraps.size>0}" >                     
  <apex:column headerValue="Quantity" >
    <apex:inputField value="{!pWrap.quantity}" required="true" />                    
  </apex:column>
</apex:pageBlockTable>  

Answer 1

This is by design. The required attribute simply makes the field required for the Ajax request.

In order to have the red mark the element needs to be the child of a pageblockscetion or sectionitem IIRC.

For example, this does display the red mark without any issue:

<apex:page standardcontroller="Account">


    <apex:form >
        <apex:pageBlock>
            <apex:pageblockSection>

                <apex:pageblockSectionItem>
                    <apex:inputField value="{!Account.Name}" required="true"/>
                </apex:pageblockSectionItem>

            </apex:pageblockSection>
        </apex:pageBlock>    
    </apex:form>
</apex:page>

For other elements you may have try out the info here:

http://itsmersaini.blogspot.com/2014/11/adding-required-red-mark-on-vf-page.html

Enclose your text box in div with class requiredInput and put another div with class requiredBlock where you want to show Red mark.

Page: testRequiredField

<apex:page controller="AccountCustomController" >
  <apex:form >
    <apex:pageBlock title="Quick Edit: {!account.Name}">
            <apex:pageBlockSection title="Account Details" columns="1">
                <div class="requiredInput">
                    <div class="requiredBlock"></div>
                    <input type="text" value="Fill your name here"  /> 
                 </div>               
             </apex:pageBlockSection> 
   </apex:pageBlock>
  </apex:form>
</apex:page> 

Basically you will have to wrap each inputField in the two divs

I have done it with jQuery / css before like this:

On document Ready:

$('.req_blk').each(function(){

        $(a).parent("td").prepend("<div class='requiredBlock'></div>");
        $(a).parent("td").contents().wrapAll("<div class='requiredInput'/>");

});

then put the class req_blk on each input field that I wanted to mark required. There may be better ways though......

Using a PageBlockTable

<apex:page standardcontroller="Account" recordSetVar="accts">


    <apex:form >
        <apex:pageBlock>
            <apex:pageBlockTable value="{!accts}" var="a">                     
              <apex:column headerValue="Name" >
                <div class="requiredInput">
                    <div class="requiredBlock"></div>
                    <apex:inputField value="{!a.Name}" required="true" />                    
                </div>
              </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>    
    </apex:form>
</apex:page>