[play1-template]Bootstrap5でfieldタグ活用（バリデーション）

  playframework1

Bootstrapって見栄えのいいページが簡単に作れて便利ですよね。play1でツールを作成する際に活用するとグレードが数段上がった気になれます。ありがたいです。

ところでplay1にはフォーム周りの記述を楽にするために fieldタグというものがあります。

[play1-template] fieldタグについて

この記事でも解説していますが fieldタグではValidation機能で検出したエラーを、${field.error} および ${field.errorClass} で得ることができます。

${field.error} はエラーの有無およびエラーメッセージ。${field.errorClass} はエラー発生時に "hasError" という文字列を返します。あらかじめstylesheetで、hasErrorクラスに対して装飾を定義しておくことを前提にしています。

一方、Bootstrap5ではフォームのエラー状態の装飾が is-validクラスで定義されていいます。class="" の中に#{if}タグでfield.errorの値の有無を判断してis-validクラスを追加するようにしてもいいのですが、あまり可読性が良くありません。

そこで ${field.errorClass} はそのままに、JavaScriptで "hasError" を目印にして "is-invalid" をクラスに追加する方法を思いつきました。

#{field 'user.name'}
<div class="mb-3 row">
  <label for="${field.id}" class="col-sm-2 col-form-label" >&{field.name}</label>
  <div class="col-sm-10">
    <input type="text" class="form-control ${field.errorClass}" id="data_実行予定日時" value="${field.value}"  name="${field.name}" />
    #{if field.error}<div class="invalid-feedback">${field.error}</div>#{/if}
  </div>
</div>
#{/field}

で、最後にJavaScriptでイベント登録。コンテンツがロード完了したタイミングで “hasError”クラスを持つ全ての要素に対して “is-invalid”クラスを追加しています。

document.addEventListener("DOMContentLoaded", function(){
    var elements = document.getElementsByClassName('hasError');
    Array.from(elements).forEach(function(e) {
        e.classList.add('is-invalid');
    });
});

Bootstrap5からは jQuery不採用となったらしいので、標準JavaScriptでの記述にしました。逆に新鮮な感じです。

LEAVE A COMMENT