JSFのカスタムバリデータでメッセージを表示する時は、メッセージにSEVERITY_ERRORを設定しないとh:messageのerrorClassは適用されません。

**環境**
OS : macOS Hight Sierra Version10.13.2
Eclipse : Version: Neon.3 Release (4.6.3)
GlassFish : 4.1.2
JSF : 2.2
JDK : 1.8

### こんな画面の[パスワードを入力して下さい。]テキストボックスにカスタムバリデータを設定しました。
![Screen Shot 2017-12-26 at 23.03.17.png](https://qiita-image-store.s3.amazonaws.com/0/159761/8f46e487-752e-ab32-c1fe-fbe818f76642.png)

```xml:inputPassword.xhtml
<省略>
<h:head>
  <title>入力画面</title>
  <h:outputStylesheet library="css" name="base.css"/>
</h:head>
<body>
<h:form>
  <h:outputLabel>パスワードを入力して下さい。</h:outputLabel>
  <br />
  <h:inputSecret id="password" value="#{passwordBean.password}">
    <f:validateRequired />
    <f:validateLength minimum="3" maximum="10" />
    <f:validator validatorId="passwordValidator" />
  </h:inputSecret>
  <h:message for="password" errorClass="error" />
  <br />
  <h:outputLabel>確認のためにもう&nbsp;&nbsp;１度入力して下さい。</h:outputLabel>
  <br />
  <h:inputSecret id="rePassword" value="#{passwordBean.kakuninPassword}">
    <f:validateRequired />
  </h:inputSecret>
  <h:message for="rePassword" errorClass="error" />
  <br />
  <h:commandButton value="送信" action="#{passwordBean.onClickSend}" />
</h:form>
</body>
</html>
```

```css:base.css
@CHARSET "UTF-8";
.error {
    color: red;
}
```

### SEVERITY_ERRORを設定しないとメッセージにerrorClassのスタイルが適用されません。
![Screen Shot 2017-12-26 at 23.11.58.png](https://qiita-image-store.s3.amazonaws.com/0/159761/9823831c-bfa3-67df-3c3d-8dedbe7e393c.png)

```java:PasswordValidator.java
<省略>
/** パスワード入力画面用のカスタムバリデータ. */
@FacesValidator(value = "passwordValidator")
public class PasswordValidator implements Validator {
    private static final String KINSHI = "password";

    @Override
    public void validate(FacesContext context, UIComponent component, Object value)
            throws ValidatorException {
        String inputedValue = (String) value;
        if (inputedValue.equals(KINSHI)) {
            FacesMessage errorMessage = new FacesMessage(KINSHI + "は使えません。");
            throw new ValidatorException(errorMessage);
        }
    }
}
```

```html:ブラウザの開発ツールで見た状態
<label>パスワードを入力して下さい。</label>
<br>
<input id="j_idt6:password" type="password" name="j_idt6:password" value="">
"passwordは使えません。
  "
<br>
<label>確認のためにもう&nbsp;&nbsp;１度入力して下さい。</label>
<br>
<input id="j_idt6:rePassword" type="password" name="j_idt6:rePassword" value="">
<span class="error">検証エラー: 値が必要です。</span>
```

### SEVERITY_ERRORを設定するとerrorClassのスタイルが適用されました。
![Screen Shot 2017-12-26 at 23.19.55.png](https://qiita-image-store.s3.amazonaws.com/0/159761/6485e87d-d6c2-a7ce-e8a1-b6489d82e610.png)

```java:PasswordValidator.java
<省略:他は上記コードと同じ>
            FacesMessage errorMessage = new FacesMessage(KINSHI + "は使えません。");
            errorMessage.setSeverity(FacesMessage.SEVERITY_ERROR);
            throw new ValidatorException(errorMessage);
<省略:他は上記コードと同じ>
```

```html:ブラウザの開発ツールで見た状態
<label>パスワードを入力して下さい。</label>
<br>
<input id="j_idt6:password" type="password" name="j_idt6:password" value="">
<span class="error">passwordは使えません。</span>
<br>
<label>確認のためにもう&nbsp;&nbsp;１度入力して下さい。</label>
<br>
<input id="j_idt6:rePassword" type="password" name="j_idt6:rePassword" value="">
<span class="error">検証エラー: 値が必要です。</span>
```

### 助けてくれたのは・・・
> errorClass属性 : errorメッセージのCSSクラスを指定する
> ![image.png](https://qiita-image-store.s3.amazonaws.com/0/159761/8bf08f41-db41-c47e-c5aa-0c10d473d362.png)

- [JSF ページでのエラー・情報・警告の表示 - Apache MyFaces - Apache Software Foundation](http://oss.infoscience.co.jp/myfaces/cwiki.apache.org/confluence/display/MYFACES/Displaying+Errors+-+Infos+-+Warnings+in+JSF+pages.html)
- [lab. JSF2によるカスタムバリデータのサンプル](http://lab-aki.blogspot.jp/2013/12/jsf2-jsf1.html)