ところで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での記述にしました。逆に新鮮な感じです。

show()やhide()でオブジェクトの表示／非表示を切り替えることができる。
逆にオブジェクトが表示状態なのか、非表示状態なのか判定する方法。
条件 ‘:visible’ で表示状態を、 ‘:not(:visible)’ で非表示状態を絞り込めるのでこれを利用する。

自身が非表示であるかの判定

if ($(obj).is(':not(:visible)')) { 私は非表示である }

親が非表示となっているかを判定する場合

if ($(obj).parents(':not(:visible)').length > 0)) { 非表示の配下に属している }

‘disabled’属性に値を設定することで実現する。
ボタンを無効にする。

$('#btn01').attr('disabled',true);
$('#btn01').attr('disabled', 'disabled');

ボタンを有効にする。

$('#btn01').attr('disabled',false);
$('#btn01').removeAttr('disabled');

チェックボックスのチェック状態の取得

if ($('#mycheck').attr('checked')) alert('checked!');
if ($('#mycheck').is(':checked')) alert('checked!');

チェックを設定する

$('#mycheck').attr('checked', 'checked');

チェックを解除する

$('#mycheck').removeAttr('checked');

チェックされている要素

$(':checked')

チェックされている要素に対する処理

$(':checked').each(function() { ... });

チェックされていない要素に対する処理

$(':not(:checked)').each(function() { ... });

Submitボタンを通常ボタンへ変更するときの方法です。
Webアプリで画面上のボタン押下処理をSubmitボタンで設計していたのに、突然Submitボタン使用禁止にされた場合に使えます。
そんなことあるのか、と言われそうだが実話です。
IEでのSubmitボタン挙動でフォーカスを示す青い枠が表示されてしまうのを回避するために変更しました。
他の解決方法があったら教えてください。

<form id="form1">

  <input type="submit" name="register" value="登録" />
  <input type="submit" name="delete" value="削除" />

このように複数のSubmitボタンの名前を変えておくと、例えば登録ボタンが押されるとregisterに値が設定されたようにフォームが送信される。

register=登録

こんな感じ。
ここでsubmitボタンを禁止されると、ボタン押下イベントで自前でsubmit処理を行う必要が出てくる。
htmlの方は全てのsubmitをbuttonに変更し、jQueryでクリックイベントをまとめて設定しやすくするために識別子として class に “submit” を設定。

<form id="form1">

  <input type="button" name="register" value="登録" class="submit" />
  <input type="button" name="delete" value="削除" class="submit" />

// Submitボタン押下イベント設定

$('.submit').each(function() {
    $(this).click(function() {
        $('<input />').attr('type','hidden')
            .attr('name',$(this).attr('name'))
            .attr('value',$(this).attr('value'))
            .appendTo('#form1');
        $('#form1').submit();
    });
});

いちおう書き下しておくと、

1. classにsubmitという文字列が指定されている要素に対してクリックイベントを設定する。
2. クリックイベントでは動的にhidden要素を作成する。
3. その際のnameとvalueはイベントを設定する対象のものをそのまま設定する。
4. 動的にhidden要素を追加した後、フォームのsubmit処理を行う。

こうすることでinput-typeの変更とclassの追加の手間だけで、サーバプログラム側の変更が不要となる。

注意事項

• jQueryでは一つのイベントに対して複数の関数を登録できるため、もともとのボタンに別のイベントを定義していた場合は今回定義した処理以外の処理も実行される。
• 定義した順に処理が呼び出されるようなので、Submit代替処理は一番最後に定義するようにする。
• 初めのイベントでクリックを無効にするような中断を行う場合は、次のようにstopImmediatePropagation()を呼び出す。

$('btn01').click(function(e) {
    if (中断条件) {
        e.stopImmediatePropagation();
    }
});

• 登録ボタンの確認ダイアログなどが該当しそう。

参考にしたサイト

FORMでsubmitする前にhidden項目を追加する。 | keywords memo

https://keywordsmemo.blogspot.com/2011/05/formsubmithidden.html

javascript にはtrim関数が無い。
というか無いわけではないらしいのだが、ブラウザによってまちまちで、ズバっと書けないようだ。
そこでｊQueryが用意しているtrim関数を使う。

$.trim(str);

フルjQueryというわけにもいかない場合があるので。

DOM⇒jQuery

単に$( )で囲むだけでよい。

$(document)

jQuery⇒DOM

jQueryオブジェクトの0番目の要素を参照する。

var obj = $(document)[0]

selectタグに対する操作についてあれこれ。

サンプルhtml

<select id="cn3">
  <option></option>
  <option value="00">00 : ゆりかご</option>
  <option value="01">01 : スピーカー</option>
  <option value="03">02 : 鬼目ナット</option>
</select>

指定の要素を選択する

value=”03″の要素を選択状態にする。

$('#cn3').val('03');

option要素を動的に増減する

要素を追加したいとき

追加したい要素をベタで書く方法

$('#cn3').append($('<option value=""></option>'));

追加したい要素をパラメータに分解して書く方法

$('#cn3').append($('<option>').attr({ value: '値' }).text('選択肢の名前'));

要素を削除したいとき

要素を指定して削除する場合

‘[value=??]’で削除する要素を指定します。”01″のスピーカーを削除するのであれば次のように書きます。

$('#cn3').children('[value=01]').remove();

value値の指定がされていない要素の場合は、そのまま素直に指定しなければよいようです。

$('#cn3').children('[value=]').remove();

全ての要素を削除する場合

$('#cn3').children().remove();

対象オブジェクトに想定しているクラス属性が含まれているか判定する方法。

if ($(obj).hasClass('color_white')) { .... }

classには複数のクラス属性を記述することができるので、スタイル適用のためだけでなく、制御用のフラグとしても利用できる。

追加する、削除する

$(obj).addClass('readonly');
$(obj).removeClass('readonly');

confirm関数を使うと、OKとキャンセルボタンのあるメッセージダイアログを表示することができる。
引数には表示するメッセージを設定する。
戻り値は真偽値。

if (confirm('編集中の内容を破棄して中断しますか？') {
  close();
}