salesforce 必須項目 赤 Visualforceの必須の赤線を表示する

Webエンジニアの転職なら【レバテックキャリア】

こんにちは、管理人の@Salesforce.Zです。

読んだら得ること

★　VFでの必須項目を見せるCSS

目次

必須項目

必須項目

必須のマークをつけたい場合、required="true"とすればできるのですが、画面にいろいろボタンを用意して、たとえば削除とか、戻るみたいな機能があると、自動で必須チェックが入る場合があり、Apexとやり取りで不便なときがあります。こんな時に見た目だけで良い場合、CSSで満たせる

標準機能での必須項目

<apex:inputField value="{!Account.Field}" id="thisid" required="true"/>

上記を使う場合、キャンセルボタンや戻るボタンなどで、ボタンのImmediate=trueにして必須項目を無効にする必要がある、そんなことを指定すると、画面のフォームに入力したデータはサーバーに送信せずにAPEXとのやり取りがしなくなる欠点もある

レバテックキャリア

見た目のみでの必須項目

DIVタグの場合

<div class="requiredInput">
    <div class="requiredBlock"></div>
    <apex:inputText value="{!Account.Phone}"/>
</div>

Apexタグの場合

<apex:outputPanel styleClass="requiredInput" layout="block">
    <apex:outputPanel styleClass="requiredBlock" layout="block"/>
    <apex:inputText value="{!Account.Phone}"/>
</apex:outputPanel>

Apexタグのやや複雑の場合

<apex:pageBlock>
<apex:pageBlockSection>
<apex:pageBlockSectionItem>
    <apex:outputLabel value="Phone" />
    <apex:outputPanel styleClass="requiredInput" layout="block">
        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
        <apex:inputText value="{!Account.Phone}"/>
    </apex:outputPanel>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>

以上でした。

関連記事

Salesforce Immediate=true not work commandButton