フォームの設問の入力(選択)状態に応じて別の設問を入力必須にする

例えば下記のキャプチャのように設問「問い合わせ種類」で「その他」を選択すると、設問「問い合わせ種類詳細」を入力必須にするケースです。これは「フォームのバリデーション・プラグインの作成」を参考にプラグインを実装することで実現できます。（入力必須にする、というよりは入力必須状態を作り出す、と言う方が正しいでしょうか。）

設問の準備

以下のように設問を準備します。

プラグインの作成

設問「問い合わせ種類詳細」に対してカスタムバリデーションを作成します。まずconfig.jsonに定義を記述します。ここは概ねドキュメント通りで、プロジェクトに応じて適宜ラベル・メソッド名等変更してください。ポイントはforce: trueを指定することです。forceの設定により、値がない場合でも強制的にバリデーションを実行することができます。（値がない場合、通常は必須チェック以外のバリデーションは実行の必要がないからだと思います。）

{
    "label": "ALFCustomValidation",
    "id": "alfcustomvalidation",
    "component": "ALFCustomValidation",
    "version": "1.0",
    "author": "Alfasado Inc.",
    "author_link": "https://alfasado.net/",
    "description": "Provide custom form validation.",
    "form_validations": {
        "custom_validation": {
            "component": "ALFCustomValidation",
            "label": "Sample Validation",
            "method": "contactTypeValidation",
            "force": true
        }
    }
}

プラグインのコードは特に難しくありません。2つの設問の入力値を取得し、「問い合わせ種類」が「その他」の場合かつ「問い合わせ種類詳細」が未入力の場合に$error_msgにメッセージをセットしてfalseを返しています。

<?php


require_once LIB_DIR . 'Prototype' . DS . 'class.PTPlugin.php';


class ALFCustomValidation extends PTPlugin
{
    public function __construct()
    {
        parent::__construct();
    }


    public function contactTypeValidation($app, $question, $value, &$error_msg): bool
    {
        // 設問「問い合わせ種類」の値を取得
        $type = $app->param('question_contact_type');


        // 入力値をチェック
        if ($type === 'その他') {
            if (!$value) {
                $error_msg = '問い合わせ種類詳細を入力してください';
                return false;
            }
        }


        return true;
    }
}

プラグインの作成後、設問「問い合わせ種類詳細」のバリデーションをプラグインで実装したバリデーション（config.jsonのlabelに記述したラベルのもの。この例だとSample Validation）に変更してください。必須にはチェックを入れません。

まとめ

ここまでの内容でCMS(サーバーサイド)の実装は完了です。「その他」を選択した時だけ設問「問い合わせ種類詳細」を表示する・required属性を設定する等はJavaScriptでDOMを操作してください。バリデーションプラグインを上手く活用し、送信する人・受け取る人ともに不便を感じることのない分かりやすいフォームを作成して頂ければと思います。

※初稿の時点では「エラーメッセージを表示する位置を変える」操作をご紹介しましたが、force指定により設問「問い合わせ種類詳細」に対してバリデーションが設定できるようになったため不要となりました。

カテゴリー：技術情報

投稿者：安倍