Skip to content

送信前にタイトルを整えて画面と送信値を揃える ​

第1版作成 最終更新 (日本時間)
確認バージョン1.5.8.1

タイトルの前後の空白をコードで除き、整えた値を画面と送信データの両方へ反映したい場合の実装です。入力欄へ .val() で代入するだけではなく、送信バッファも更新します。

コードは本体ソースで照合しています。実機での動作確認結果ではありません。

適用条件 ​

条件指定
実行場所ブラウザ側のスクリプト
出力先新規作成・編集
イベントbefore_validate
操作data-action が create または update の送信
対象編集できる通常のタイトル入力欄(物理名 Title)

本体の send() は、送信ボタンに validate クラスがある場合に before_validate を呼び、その後にフォームの検証を行います。このイベント名だけで、すべての通信に割り込めるわけではありません(送信と検証の順序)。

実装コード ​

js
$p.events.before_validate = function (args) {
    const $button = args && args.$control;
    const action = $button
        ? String($button.attr('data-action') || '').toLowerCase()
        : '';
    if (action !== 'create' && action !== 'update') {
        return true;
    }

    const $title = $p.getControl('Title');
    if (!$title || $title.length !== 1 || !$title.is('input[type="text"]')
        || $title.prop('disabled') || $title.prop('readOnly')) {
        return true;
    }

    const current = String($title.val() || '');
    const normalized = current.trim();
    if (current !== normalized) {
        $p.set($title, normalized);
    }
    return true;
};

$p.getControl('Title') は物理名から jQuery オブジェクトを取得します。$p.set() は通常のテキスト入力欄の値を変更した後、$p.setData() で送信バッファへ登録します。第1引数に物理名の文字列をそのまま渡す形にはしません(getControl()、set())。

return true は後続処理を続けるための戻り値です。イベントが false を返すと send() はそこで終了します(イベントの戻り値、検証前の中断判定)。

この位置で処理する理由 ​

読み込み時の on_editor_load では、その後の手入力を整えられません。また、通常の編集画面への更新応答でも読み込みイベントを返す経路があるため、無条件の代入は保存後の再描画時にも値を変更します(編集画面への応答)。

この実装では、対象の作成・更新ボタンから送信へ進んだ時点で、検証前にタイトルを整えます。空白だけの値は空文字列になります。その後の本体の入力検証は継続するため、コードで必須検証を置き換えるものではありません。

確認する結果 ​

検証用レコードでタイトルの前後に半角空白を入れ、作成・更新の両方で次の3点を確認します。

  1. 検証前のイベントでタイトル欄が空白を除いた値になる。
  2. ネットワーク表示の送信データも同じ値になる。
  3. 保存成功後にレコードを再取得しても同じ値になっている。

送信バッファのキーは入力要素の ID です。通常の記録テーブルでは Results_Title、期限付きテーブルでは Issues_Title を確認します(setData())。

適用範囲と制約 ​

  • このコードを出力したブラウザ画面の、該当する送信・検証経路に適用します。API やバックグラウンド処理の保存値を整える用途には、サーバー側で保存前に処理する例を起点に、対象の保存経路を確認してください。
  • 同じ before_validate に別の関数を代入すると前の関数を上書きします。既存の処理と併用する場合は 複数処理の登録を参照してください。
  • 本体や別のスクリプトが後続で値を変更する場合は、送信値と保存値を分けて確認します。

関連ページ ​

変更履歴

第1版スクリプトの全体像と実装例を追加し、課題別の案内を整備