Bootstrapって見栄えのいいページが簡単に作れて便利ですよね。play1でツールを作成する際に活用するとグレードが数段上がった気になれます。ありがたいです。
ところでplay1にはフォーム周りの記述を楽にするために 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での記述にしました。逆に新鮮な感じです。