コールバック

espar form では、[入力]→[確認]→[完了] の画面遷移の各段階で独自の処理を挿入できるコールバックを使用できます。

 

コールバックの種類

コールバック関数名	コールバックが呼ばれるタイミング
input_ready_callback	入力画面が表示されきって準備が完了した直後
confirm_ready_callback	確認画面が表示されきって準備が完了した直後
validation_failure_callback	入力項目にエラーがあった時にエラーを表示した直後
submit_success_callback	送信が成功して完了した直後
submit_failure_callback	送信が失敗で終わった直後

 

コールバックの使用方法

専用埋め込みコード中のグローバルオブジェクト 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の入力要素に必須項目チェックのエラーがある(つまり、必須項目なのに入力されていない)ことを示しています。