コールバック

espar form は[入力]→[確認]→[完了] の画面遷移の各段階で使用できるコールバック関数を備えています。独自の JavaScript を書くことでフォームの振る舞いを制御することができます。各コールバックの名称は グローバルオブジェクト を参照して下さい。

以下に、具体的な使用方法を示します。

コールバックの使用方法

専用埋め込みコード中のグローバルオブジェクト espar_form を、

<script>
    var espar_form = { espf: { api_key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" } };
</script>

以下のように拡張し、コールバック名をキーとした関数を定義します。

<script>
    var espar_form = {
        espf: {
            api_key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
            submit_success_callback: function() {
                // 送信が成功で終わった直後の処理
                console.log("success");
            }
        }
    }
</script>

複数のコールバックを同時に指定することも可能です。

<script>
    var espar_form = {
        espf: {
            api_key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
            input_ready: function() {
                // 入力画面が表示されて準備完了した直後の独自処理
                console.log("input_ready");
            },
            submit_success_callback: function() {
                // 送信が成功で終わった直後の処理
                console.log("success");
            }
        }
    }
</script>

validation_failure_callback について

入力項目で指定された入力チェッククラスの条件が満たされない場合、エラーが発生してエラー文言が表示されます。エラー表示の直後に呼ばれるコールバック関数 validation_failure_callback です。

validation_failure_callback がコールバックで呼ばれた時、グローバルオブジェクト内の validation_erros (espf_form.espf.validation_errors) を参照すると、どの要素でエラーが発生したかを示す配列を得ることができます。以下がその例です。

espf-e-name
espf-e-name-required

name属性がnameの入力要素に必須項目チェックのエラーがある(つまり、必須項目なのに入力されていない)ことを示しています。