LoginSignup
0
0

More than 3 years have passed since last update.

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

Posted at

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

VFREQUIRED_2.PNG

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

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

VFREQUIRED_3.PNG

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0