apex:selectList等でブラウザの必須チェックを行う

3150 ワード
Salesforce Visualforce Salesforce テキストリンク

<apex:page>にdocType="html-5.0"をつけなかった場合をつけた場合、ブラウザでも必須チェックが行われますが、一部の標準コンポーネントはrequired属性がレンダリングされず、必須チェックが働かないようです(サーバー側のチェックは行われます)。

上の図のように、下記の標準コンポーネントはブラウザで必須のチェックが行われていません。

  • inputCheckbox (サーバー側の必須チェックも行われない)
  • inputFile
  • inputHidden (そもそもinput[type=hidden]がrequiredをサポートしていない)
  • inputSecret
  • selectList
  • selectCheckboxes

html-require='true'を使用することもできません。

コンポーネント <apex:inputSecret> の属性「required」は上書きできません

inputCheckbox、inputFile、inputSecret、selectListは下記のようにjavascriptでrequired属性をつけることでブラウザで必須チェックが行われるようになります。
rerenderで入力フォームを再描画する場合、<script>も再描画範囲に含める必要があります。含めない場合、再描画後にrequired属性が消えてしまいます。

<apex:form>
  <apex:selectList value="area" styleClass="form-required">
    <apex:selectOption itemValue="AP" itemLabel="アジア太平洋"/>
    <apex:selectOption itemValue="EU" itemLabel="ヨーロッパ"/>
    <apex:selectOption itemValue="NA" itemLabel="北アメリカ"/>
  </apex:selectList>
</apex:form>

<script>
  window.onload = function(){
    Array.from(document.getElementsByClassName('form-required')).forEach(element=>{element.required=true;};
  }
</script>