JavaEE7 validation で引っかかった際のエラーメッセージ表示

JavaEE7でWebアプリを作成しています。
画面はJSFで作っております。
入力値をValidationで検査しているのですが、
エラーになった際のJSF側での表示で
<h:message>タグを用いていエラーを表示させていたのですが、
なぜか、画面の左上に<h:messages/>タグを挿入しているかのように
エラー内容が列挙された感じで表示されます。
※<h:message>タグを挿入した位置にも表示されます。

    <h:body>
        <ui:decorate template="ComMenu.xhtml">
        </ui:decorate>
        <!-- 本体  -->
        <div class="container">
            <h:form  id="SerchComp_Condition" class="form-horizontal">
                <!-- 1段目 -->
                <div class="form-group">
                    <!-- 企業名 Company Name-->
                    <label for="companyinfo-list-label" class="col-xs-4 col-sm-2 control-label text-right">企業名称：</label>
                    <div class="col-xs-8 col-sm-5 controls">
                        <h:inputText  class="form-control" id="CompanyName" value="#{serchCompBean.companyName}" />
                        <h:message for="CompanyName" id="CompanyName_VMsg" style="color: red" title="入力エラー"/>
                    </div>

テンプレートの内容は以下です。

    <h:body>

        <div id="top" class="top">
            <ui:insert name="top">
                <nav class="navbar navbar-inverse" role="navigation">
                   <div class="container">

                      <!-- モバイル表示用の省略メニュー -->
                      <div class="navbar-header">
                          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                          </button>
                          <a class="navbar-brand" href="#"XXXXXアプリ</a>
                      </div>

                      <!-- ナビゲーションメニュー -->
                      <div class="collapse navbar-collapse" id="navbar-menu">
                          <ul class="nav navbar-nav navbar-right">
                              <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                  アカウント情報<span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                    <h:form> <h:commandLink action="#{comMenuBean.ChangeUserInfo}"  value=" パスワード変更"/> </h:form>
                                  </li>
                                  <li class="divider"></li>
                                  <li>
                                    <h:form> <h:commandLink action="#{comMenuBean.LogOut}"  value=" ログアウト"/></h:form>
                                  </li>
                                </ul>
                            </li>
                        </ul>
                      </div> <!-- /ナビゲーションメニュー -->
                   </div><!-- /container -->
                </nav><!-- /nav -->
           </ui:insert>
        </div>

        <div id="content" class="center_content">
<!--            <ui:insert name="content">Content</ui:insert> -->
        </div>

    </h:body>

メッセージはテンプレートの内容の下に表示されます。
テンプレートの内容に問題があるのかと疑っているのですが
なにが原因かわかりません。

よろしくお願いします。

行動規範の内容に同意します

回答2件

自己解決

テンプレートをばらして１ファイルに記載し
<h:message>を<h:messages>に変更したところ、事象が収まりました。
テンプレート再度利用して、
<h:message>を<h:messages>に変更しましたが、やはり同じ事象が発生。
エラーが表示されているページのソースをよくよく確認したところ
テンプレートの<body></body>間にメッセーが表示されていることを発見。
テンプレートの<body></body>タグなど不要そうなタグを削除したところ、
事象が発生しなくなりました。
修正したテンプレートのコードは以下。

<ui:insert name="top">
    <nav class="navbar navbar-inverse" role="navigation">
       <div class="container">

          <!-- モバイル表示用の省略メニュー -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">FIR業務支援アプリ</a>
          </div>

          <!-- ナビゲーションメニュー -->
          <div class="collapse navbar-collapse" id="navbar-menu">
              <ul class="nav navbar-nav navbar-right">
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      アカウント情報<span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                        <h:form> <h:commandLink action="#{comMenuBean.ChangeUserInfo}"  value=" パスワード変更"/> </h:form>
                      </li>
                      <li class="divider"></li>
                      <li>
                        <h:form> <h:commandLink action="#{comMenuBean.LogOut}"  value=" ログアウト"/></h:form>
                      </li>
                    </ul>
                </li>
            </ul>
          </div> <!-- /ナビゲーションメニュー -->
       </div><!-- /container -->
    </nav><!-- /nav -->
</ui:insert>

※<ui>の上部にヘッダーの定義等がありますが省略しております。

恐らく、テンプレートの<body>内部に<h:message>が無いため付与されたものかと思われます。

ひとまず、自己解決とさせていただきます。

投稿2016/10/04 09:33

hirakosu

総合スコア56