JSF Bean Validation のエラー表示を Bootstrap で

はじめに
入力フォーム
BeanValidation

はじめに

JSF における Bean Validation でのエラー表示についての小ネタです。。

入力フォーム

以下のようなテキスト入力を考えます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:jsf="http://xmlns.jcp.org/jsf">
...
<form jsf:id="form">
    <div class="mb-3">
        <label jsf:for="name" class="col-form-label">Name</label>
        <input type="text" class="form-control"
                jsf:id="name"
                jsf:value="#{backing.name}" />
    </div>
    ...
</form>

CSS フレームワークには Bootstrap を使っているものとし、レンダリング結果は以下のようになります。

f:id:Naotsugu:20210128222338p:plain

BeanValidation

バッキングビーンには BeanValidation で @NotEmpty などでアノテートします。

@Model
public class Backing implements Serializable {
    @NotEmpty
    private String name;
    // ...
}

エラーメッセージを出力するには以下のようにします。

    <div class="mb-3">
        <label jsf:for="name" class="col-form-label">Name</label>
        <input type="text" class="form-control #{component.valid ? '' : 'is-invalid'}"
                jsf:id="name"
                jsf:value="#{backing.name}" />
        <div class="invalid-feedback">
            <h:messages for="name" errorClass="invalid" />
        </div>
    </div>