required attribute on input controls [ Edited ]

[james2000]

I'm not able to get the required attribute on input controls to correctly display the red bar next to the control.

For example:

Code:

<apex:page standardController="Case">
  <apex:form>
    <apex:pageBlock title="Case Edit" mode="edit">
        <apex:pageBlockButtons>
          <apex:commandButton action="{!save}" value="Save"></apex:commandButton>
          <apex:commandButton action="{!cancel}" value="Cancel"></apex:commandButton>
        </apex:pageBlockButtons>
      <apex:pageBlockSection title="Case Comments" columns="1">
        <apex:pageBlockSectionItem>
          <apex:outputLabel value="Subject" for="case__subject"/>
          <apex:inputText required="true" value="{!case.Subject}"/>
        </apex:pageBlockSectionItem>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

 

If I change inputText to inputField, the control will display properly. From the documentation, it appears to me that this should work with inputText, inputTextarea, etc.


Message Edited by james2000 on 05-14-2008 04:37 PM

[Ron Hess]

I think that is a documentation issue, what page was it on?

basicaly the inputField* methods know what their data type is down to the database level, with requiredness
the inputText*  input methods do not.

[Steve Chadbourn]

This is one possible workaround. I use this where the validation rules are too complex (involve multiple fields) or can't be specified (some field types do not have a required option) in the object.

Code:

<apex:pageBlockSectionItem>
 <apex:outputLabel value="Subject" for="case_subject"/>
 <apex:outputPanel styleClass="requiredInput" layout="block">
  <apex:outputPanel styleClass="requiredBlock" layout="block"/>
  <apex:inputText id="case_subject" value="{!case.Subject}"/>
  <apex:outputPanel styleClass="errorMsg" layout="block" rendered="{!errorNoSubject}">
   <strong>Error:</strong> You must provide a subject
  </apex:outputPanel>
 </apex:outputPanel>
</apex:pageBlockSectionItem>

 

[james2000]

It's documented in the Visualforce Developer's Guide as:

A Boolean value that specifies whether this field is a required field.
If set to true, the user must specify a value for this field. If not
selected, this value defaults to false.

I just assumed it would be rendered as a required field. If that's not the behavior, a note in the docs would be helpful.

[jwetzler]

inputText is not in any way meant to be styled like salesforce or to behave like fields do in the salesforce application.  inputText is a plain, vanilla implementation of a text field that can pass strings to your controller.  Many web programmers use a red * to denote required fields.  Others make the label next to the field bold.  Salesforce uses a red bar.  But we do not want to rope people into only using salesforce styling -- giving people the option to have pages that look like salesforce, or pages that look nothing like it is part of what makes Visualforce powerful.  If what you want is salesforce styling, why not use inputField for this?  Then you'll get the normal error messaging as well, without having to roll your own (as posted by Steve).

If you must go with inputText, a view source of a page with a required field shows that you can wrap your inputText with:
<div class="requiredInput"><div class="requiredBlock"></div><apex:inputText...></div>
This must occur within a pageBlock in order for the css to be structured correctly. 

However, while this is a solution for what you're trying to do, I don't want to suggest calling into salesforce css styles often because these can and do change.  Unless you have a compelling reason not to use inputField, that's what I would suggest.


A couple of side notes about your page.  If you're going to use outputLabel (which you should if you are going to use inputText), your "for" attribute should reference the id of the inputText.  (I assume you know this since you're even using outputLabel in the first place, but I want to make sure).  Better yet though, you can replace that entire pageBlockSectionItem with a call to apex:inputField and we'll take care of the label for you.  We'll style it and even translate it based on your language setting.

[james2000]

The problem with using inputField is that I still end up needing to style it if I want it to look like a standard SF field. Especially for a textarea setting the rows and cols is easier with an inputTextarea.

For example:

Code:

<apex:page standardController="Case">
<apex:form>
<apex:pageBlock title="Case Comment Edit" mode="edit">
<apex:pageBlockButtons>
<apex:commandButton action="{!save}" value="Save"></apex:commandButton>
<apex:commandButton action="{!cancel}" value="Cancel"></apex:commandButton>
</apex:pageBlockButtons>
<apex:pageBlockSection title="Case Comments" columns="1">
<apex:pageBlockSectionItem>
<apex:outputLabel value="Description" for="case__description"/>
<apex:inputField required="true" value="{!case.Description}"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Using an inputField for a textarea does show the red bar for a required textarea but the text area is too small and doesn't appear the default size of other SF textarea fields.

[jwetzler]

There is a known issue with the size of the textareas.  I believe that the text area is the right size for fields that appear in two columns (like address on an account) but does not switch to a different style if placed in one column (like description on cases).  You can still customize that, however,and I think it's still less code with inputField than it is with inputText because you don't have to create your own label and style it.

Code:

<apex:page standardController="case">
 <apex:form>
  <apex:pageBlock>
   <apex:pageBlockSection>
    <apex:inputField value="{!case.description}" required="true" style="width:500px; height:200px"/>
   </apex:pageBlockSection>
  </apex:pageBlock>
 </apex:form>
</apex:page>

 You can adjust the width and height accordingly, I was just throwing some values in.

[TehNrd]

You should be able to set custom styling in addtion to the salesforce.com styling when using inputFields:

Code:

<apex:page standardController="Case">
<style>
.width {width: 800px}
</style>

<apex:form>
<apex:pageBlock title="Case Comment Edit" mode="edit">
<apex:pageBlockButtons>
<apex:commandButton action="{!save}" value="Save"></apex:commandButton>
<apex:commandButton action="{!cancel}" value="Cancel"></apex:commandButton>
</apex:pageBlockButtons>
<apex:pageBlockSection title="Case Comments" columns="1">
<apex:pageBlockSectionItem>
<apex:outputLabel value="Description" for="case__description"/>
<apex:inputField required="true" value="{!case.Description}" styleClass="width"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Edit: looks like it was already answered above.

Message Edited by TehNrd on 05-16-2008 10:35 AM

[Rajesh Shah]

Thanks. Your reply was helpful.