Skip to content
espar form DOCS

グローバルオブジェクト

導入基礎編で解説した espar form の埋め込みコードは以下のようなものでした。

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

デフォルト表記はシンプルなものですが、espar_form グローバルオブジェクトは espar form を高度に制御することのできる key value を多数備えた巨大なオブジェクトです。グローバルオブジェクト espar_form の全仕様を以下に示します。

グローバルオブジェクト espar_form の全要素

espar_form: {
    "フォームID" : {
        // ホスト毎に指定された40桁の英数字文字列。必須
        api_key: "APIキー",


        // デバッグ表示をするかどうか、またその出力レベル
        debug: true,
        log_level: "INFO",


        // hidden 指定された要素も入力チェックするかどうか
        validate_hidden_element: false,


        // 複数入力項目を確認画面で表示するときのデリミタ（全項目用と個別項目用）
        delimiter: ",",
        delimiter_プロパティ名: "<br>",


        // 送信完了画面にフォームを表示し続けるかを定義
        keep_displayed: false,


        // 各種コールバック
        input_ready_callback: function() {...},         // 入力画面が表示されきった後
        confirm_ready_callback: function() {...},       // 確認画面が表示されきった後
        validation_success_callback: function() {...},  // 入力画面でエラーがなかった時
        validation_failure_callback: function() {...},  // 入力画面でエラーがあった時
        submit_success_callback: function() {...},      // 送信が成功して完了した直後
        submit_failure_callback: function() {...},      // 送信が失敗して終了した直後
        back_clicked_callback: function() {...},        // 確認画面の戻るのクリック直後
        submit_clicked_callback: function() {...},      // 送信ボタンが押された直後
        confirm_clicked_callback: function() {...},     // 確認ボタンが押された直後


        // ページトップヘの自動スクロール
        top_on_confirm: false,
        top_on_success: false,
        top_on_failure: false,


        // 指定要素への自動スクロール
        scroll_on_back: "要素のセレクタ",       // 戻るボタン押下時に指定した要素が最上部になるように画面をスクロールする
        scroll_on_confirm: "要素のセレクタ",     // 確認画面表示時に指定した要素が最上部になるように画面をスクロールする
        scroll_on_success: "要素のセレクタ",     // 送信成功時に指定した要素が最上部になるように画面をスクロールする (submit_success_url 指定時は使用されない）
        scroll_on_failure: "要素のセレクタ",     // 送信失敗時に指定した要素が最上部になるように画面をスクロールする (submit_failure_url 指定時は使用されない）


        // バリデーションエラーが発生した箇所を示す配列
        validation_errors: Array(),


        // バリデーションエラーが発生した時に付与するクラス名
        validation_error_class: "クラス名",


        // フォーム設定をリロードするための関数（espar-form エンジンが追加する）
        reload_form_config: function() {...},


        // 送信中を表す indicator アイコンをオーバレイ表示する
        spinner_on_submit: true,


        // 指定イベントの発生でバリデーションを実行する
        validate_on_focusout: true,     // フォーム要素からフォーカスが外れたらバリデーションを実行する
        validate_on_keyup: true         // フォーム要素でキー入力する度にバリデーションを実行する
    },


    // ２つ目以降のフォーム
    "esparフォームID2": {
        ...
    }
}

上記の通り espar_form は、フォームIDをキーとする設定オブジェクト列です。デフォルトで指定されている api_key のほか、フォームIDごとに様々な設定が可能です。全設定の詳細を以下に示します。必要なもののみ宣言して使用して下さい。

各要素の説明

要素必須説明
フォームID○espfで始まる任意の文字列。esparフォームオブジェクトに対するキー。
<form>タグに指定したclass属性に一致している必要がある
api_key○弊社より指定したAPIキー。40桁の英数字。ホスト名毎に異なる一位の値
debugtrue指定でコンソールログにデバッグ情報を表示
config_testONにすると espar form をコンフィグテストモードで起動する。espar form クラス指定の正誤チェックのいを行い結果をコンソールに出力する。コンフィグモードでは、メール送信は行われないので 本番環境で絶対に true にしない こと
log_leveldebugがtrueの時のみ有効。デバッグ情報のレベルを指定する。詳しくは デバッグ を参照のこと
validate_hidden_elementinput要素等でhiddenを指定されている項目も入力チェックを行う場合にtrueにする。チェックボックスやラジオボタンの見た目をCSSで変更している場合、入力チェックが正しく動作しない場合がある。その時に本フラグをtrueにすること
delimiterチェックボックスや複数選択リストボックスの値を確認画面に表示する時に使用
フォーム内の全ての複数要素に適用。複数の被選択項目の区切り文字
delimiter_[name値]上記と同じ機能だが、適用する入力要素を明示的に指定する時に仕様する
指定したい要素のname属性の値を指定する
keep_displayed送信完了時に直前の入力内容確認内容を表示し続ける時にtrueを指定。未指定時はfalse
input_ready_callback入力画面が表示されきって準備が完了した直後のコールバック関数
confirm_ready_callback確認画面が表示されきって準備が完了した直後のコールバック関数
validation_success_callback入力項目にエラーがなかった時に完了画面に遷移する直前。コールバック関数内で明示的に return false; するとボタンクリックイベントをキャンセルできる
validation_failure_callback入力項目にエラーがあった時にエラーを表示した直後
submit_success_callback送信が成功して完了した直後のコールバック関数
submit_failure_callback送信が失敗で終わった直後のコールバック関数
back_clicked_callback確認画面の戻るボタンがクリックされた直後のコールバック関数。コールバック関数内で明示的に return false; するとボタンクリックイベントをキャンセルできる
submit_clicked_callback送信ボタンがクリックされた直後のコールバック関数。コールバック関数内で明示的に return false; するとボタンクリックイベントをキャンセルできる
confirm_clicked_callback確認ボタンがクリックされた直後のコールバック関数。コールバック関数内で明示的に return false; するとボタンクリックイベントをキャンセルできる
top_on_confirm確認画面でページのトップへスクロールする
タイミングは confirm_ready_callback のコールバック関数を実行する直前
top_on_success送信に成功したらページのトップへスクロールする
タイミングは submit_success_callback のコールバック関数を実行する直前
top_on_failure送信に失敗したらページのトップへスクロールする
タイミングは submit_failure_callback のコールバック関数を実行する直前
scroll_on_back戻るボタン押下時に指定した要素が最上部になるように画面をスクロールする
scroll_on_confirm確認画面表示時に指定した要素が最上部になるように画面をスクロールする
scroll_on_success送信成功時に指定した要素が最上部になるように画面をスクロールする (submit_success_url 指定時は使用されない）
scroll_on_failure送信失敗時に指定した要素が最上部になるように画面をスクロールする (submit_failure_url 指定時は使用されない）
validation_errors入力項目にエラーがあった時にエラー発生箇所の配列
validation_error_class入力項目にエラーがあった時に入力項目に自動的に付与されるクラス名
reload_form_configフォームの要素が動的に変化した直後に呼び出す必要のある関数。フォーム要素を再評価する関数を格納するプレースホルダとして機能する。フォームの要素が動的に変化しない場合は宣言不要
spinner_on_submit送信中を表す indicator アイコンをオーバレイ表示する
validate_on_focusout送信や確認ボタンクリックではなく、フォーム要素からフォーカスが外れた時にその要素のバリデーションを実行する
validate_on_keyup送信や確認ボタンクリックではなく、フォーム要素でキー入力される度にその要素のバリデーションを実行する