_global_

//更新ボタンクリック
$('#submit-button').click(function() {
    //バリデーションチェック
    if (imspValidate('#form', rules, messages)) {
        //確認ダイアログ表示
        $.imspFormUtil.confirm(
            '', //メッセージ
            '', //タイトル
            function() { //OKクリック時のコールバック関数
                imspAjaxSend('#form', 'POST', 'json'); //Ajaxでのデータ送信
            }
        );
    }
});

//登録/更新ボタンクリック
$('#submit-button').click(function() {
    //バリデーションチェック
    if (imspValidate('#form', rules, messages)) {
        //確認ダイアログ表示
        $.imspFormUtil.confirm(
            '', //メッセージ
            '', //タイトル
            function() { //OKクリック時のコールバック関数
                 //Ajaxでのデータ送信と次画面への遷移
                imspAjaxSubmit('#form', 'POST', 'json', 'reference/list/views/list.jssp',['item1']);
            }
        );
    }
});

imspAlert('エラーが発生しました', 'エラー');

// メッセージをエスケープしない場合
imspAlert('エラーが発生しました。<br/>管理者にご連絡ください。', 'エラー', false);

imspConfirm('登録してもよろしいですか？', '登録確認', function() {
    imspAjaxSend('#form', 'POST', 'json');
});

// cancel だけ指定したい場合
imspConfirm('登録してもよろしいですか？', '登録確認',
    $.noop, // 空の関数を指定します。
    function() {
        alert('キャンセルしました');
    }
);

imspConfirm('登録してもよろしいですか？<br/>対象ID : xxx', '登録確認',
    function() {
        imspAjaxSend('#form', 'POST', 'json');
    },
    $.noop, // キャンセルクリック時のコールバック関数
    false
);

//キャンセルボタンにフォーカスを当てたい場合
imspConfirm('登録してもよろしいですか？<br/>対象ID : xxx', '登録確認',
    function() {
        imuiAjaxSend('#form', 'POST', 'json');
    },
    $.noop, // キャンセルクリック時のコールバック関数
    false,
    true //キャンセルボタンにフォーカスを当てる(true)
);

imspDisableOnSubmit('#form');

// 有効にするまでの時間を指定する場合
imspDisableOnSubmit('#form', 100); // 100ms

// 組み合わせた例
<script>
  (function($) {
    imspDisableOnSubmit('#form');
    $('#submit-button').click(function(e) {
      // コンファームの結果により submit させるため、一度イベントを中断します
      e.preventDefault();
      // コンファームを表示させます
      imspConfirm('登録しても良いですか?', '確認', function() {
        $('#form').submit();
      });
    });
  })(jQuery);
</script>
<form id="form">
  <!-- 汎用ボタンではdisabledの対象にならないためsubmitボタンを配置します -->
  <input id="submit-button" type="submit" value="登録" />
</form>

// #form はバリデーション対象のフォームのセレクタを指定してください。
imspResetForm('#form');

$.ajax(
    {
         ...,
         headers: { 'x-jp-co-intra-mart-ajax-request-from-imsp-form-util': 'true'},
         error: imspTransitionToErrorPage,
         ...
    }
)

// 独自のエラー処理を行いつつエラー画面へ遷移したい場合
//
// 上記サンプルでは、エラー画面へ遷移するだけで他の処理は行えません。
// 独自の処理を追加したい場合は以下のように実装できます。
$.ajax(
    {
        ...,
        headers: { 'x-jp-co-intra-mart-ajax-request-from-imsp-form-util': 'true' },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            //
            // 独自の処理を実行
            //

            imspTransitionToErrorPage(jqXHR, textStatus, errorThrown);
        },
        ...
    }
)

<imart type="head">
  <script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
  <script src="ui/js/imsp-form-util.js"></script>
</imart>
...
// imspValidate の利用例
$('#submit-button').click(function() {
    //バリデーションチェック
    if (imspValidate('#form', rules, messages)) {
        //確認ダイアログ表示
        $.imspFormUtil.confirm(
            'メッセージ', //メッセージ
            'タイトル', //タイトル
            function() { //OKクリック時のコールバック関数
                 //Ajaxでのデータ送信と次画面への遷移
                imspAjaxSubmit('#form', 'POST', 'json', 'somewhere/nextpage',['item1']);
            }
        );
    }
});
...

//errorPlacement の標準の実装は以下の通り
//バリデーションに失敗時のメッセージを表示する場所を決定する関数
errorPlacement: function(error, element) {
    // imspSelect
    if ($(element).next().hasClass('imsp-select')) {
        error.insertAfter($(element).next());
    // imspRealCombobox
    } else if ($(element).parent().hasClass('imsp-realcombobox')) {
        error.insertAfter($(element).parent());
    // radio
    } else if ($(element).attr('type') == 'radio') {
        error.insertAfter($(element).siblings(':last'));
    // checkbox
    } else if ($(element).attr('type') == 'checkbox') {
        error.insertAfter($(element).siblings(':last'));
    } else {
        //そうでない場合は、デフォルトと同じ動作。
        error.insertAfter(element);
    }
}

//エラーメッセージを要素の上に表示したい場合、errorPlacement を以下のように指定します。
imspValidate('#form', rules, messages,
    function(error, element) {
        error.insertBefore(element);
    });

// サーバサイドバリデーションの定義ファイル (validator.js)
// input name="text1" に対して必須チェックを定義します。
var init = {
    text1: {
        caption: 'CAP.SAMPLE.REQUIRED', // あらかじめプロパティファイルに CAP.SAMPLE.REQUIRED を指定してください。
        required: true
    }
};

// Presentation Page
//
<imart type="head">
  <script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
  <script src="ui/js/imui-form-util.js"></script>

  <!--サーバサイドバリデーションの定義ファイルを読み込みます。-->
  <imart type="imuiValidationRule" rule="validator#init" rulesName="rules" messagesName="messages"/>

  <script>
  // sample で始まる文字列かどうかをチェックするバリデーションルールを定義する
  var customValidationRule = function(value, element, param) {
      // 未入力は有効。必須としない。
      if (value === '') return true;

      // sample で始まる文字列かどうかをチェックする
      if (value) {
          if ((new RegExp("^sample.*$")).test(value)) {
              return true;
          }
      }
      return false;
  }

  // beginSample という名前で上記の関数を追加します。デフォルトのメッセージを 'must begin with sample' とします。
  imuiAddValidationRule('beginSample', customValidationRule, 'This item must begin with sample');

  // サーバ側で beginSample を定義せず、クライアント側だけで beginSample を定義する場合は rules にバリデーションルールを追加します。
  rules.text1.beginSample = true;
  messages.beginSample = '{0}は sample で始まる必要があります。'; // メッセージを指定しない場合デフォルトのメッセージが表示されます。

  $(document).ready(function() {
      // imuiValidate の利用例
      $('#button').click(function() {
          // バリデーションチェック
          if (imuiValidate('#form', rules, messages)) {
              // 確認ダイアログ表示
              imuiConfirm(
                  'メッセージ', // メッセージ
                  'タイトル' // タイトル
              );
          }
      });
  });
  </script>
</imart>

<form id="form">
    <input type="text" name="text1" />
    <input type="button" id="button" value="validate" />
</form>

//
// 使用例
//
// ボタンをクリックすると somewhere/ajax へデータを Ajax で送信します。

// Presentation Page
// ボタンをクリックすると、somewhere/ajax へ Ajax でデータを送信する。
// 成功した場合 next/page へ遷移する
$(document).ready(function() {
    $('#button').click(function() {
        imuiAjaxSend('#form', 'POST', 'json');
    });
});
<form id="form" action="somewhere/ajax">
    <input type="text" name="text1" />
    <input type="text" name="text2" />
    <input type="button" id="button" value="Submit" />
</form>

// サーバ側 (Ajax での送信先: somewhere/ajax)
function init(request) {
    Debug.console(request);

    var response = Web.getHTTPResponse();
    response.setContentType('application/json; charset=utf-8');

    // var resultObject = SomeAPI.doSomething();
    var resultObject = { error: false };
    if (resultObject.error) {
        // 処理が失敗した場合
        response.sendMessageBodyString(ImJson.toJSONString({
            error: resultObject.error,
            errorMessage: resultObject.message,
            detailMessages: ['管理者にお問い合わせください', '連絡先：admin@xxx.xxx.xxx']
        }));
    }

    // 処理が成功した場合
    response.sendMessageBodyString(ImJson.toJSONString({
        error: false,
        errorMessage: '',
        successMessage: '登録しました'
    }));
}

//
// beforeSend, complete の使い方
//
// この例では、beforeSend と complete の両方を使って Ajax の通信中に通信中であることを示す画像を表示します。
imuiAjaxSend('#form', 'POST', 'json',
    function() {
        $(document.body).imuiIndicator(); // imuiIndicator を表示
    },
    function() {
        $(document.body).imuiIndicator('destroy'); // imuiIndicator を非表示
    }
);

//
// beforeSend を使用せずに complete だけを指定する場合
//
// この例では、Ajax の処理が完了したら alert を実行します。
imuiAjaxSend('#form', 'POST', 'json',
    $.noop, // 空の function を指定します。
    function() {
        alert('処理完了');
    }
);

//
// メッセージをクリックするまで消えないようにする場合
//
// duration に 0 を指定することで自動的に非表示になりません。
imuiAjaxSend('#form', 'POST', 'json', $.noop, $.noop, true, 0);

//
// 組み合わせた例
//
// バリデーションチェック、確認ダイアログを組み合わせた例です。

// サーバサイドバリデーションの定義ファイル (validator.js)
// input name="text1" に対して必須チェックを定義します。
var init = {
    text1: {
        caption: 'CAP.SAMPLE.REQUIRED',
        required: true
    }
}

// Presentation Page
<imart type="head">
  <script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
  <script src="ui/js/imui-form-util.js"></script>
</imart>

// 上記サーバサイドバリデーションの定義ファイルを読み込みます。
<imart type="imuiValidationRule" rule="validator#init" rulesName="rules" messagesName="messages"/>

<script>
$(document).ready(function() {
    // 登録/更新ボタンクリック
    $('#button').click(function() {
        // バリデーションチェック
        if (imuiValidate('#form', rules, messages)) {
            // 確認ダイアログ表示
            imuiConfirm(
                '<imart type="string" value=message/>', // メッセージ
                '<imart type="string" value=title/>', // タイトル
                function() { // OKクリック時のコールバック関数
                    imuiAjaxSend('#form', 'POST', 'json',
                        function() {
                            $(document.body).imuiIndicator(); // imuiIndicator を表示
                        },
                        function() {
                            $(document.body).imuiIndicator('destroy'); // imuiIndicator を非表示
                        }
                    ); // Ajaxでのデータ送信
                }
            );
        }
    });
});
</script>

<form id="form" action="somewhere/ajax">
    <input type="text" name="text1" />
    <input type="text" name="text2" />
    <input type="button" id="button" value="Submit" />
</form>

// サーバ側 (Ajax での送信先: somewhere/ajax)
function init(request) {
    Debug.console(request);

    var response = Web.getHTTPResponse();
    response.setContentType('application/json; charset=utf-8');

    // var resultObject = SomeAPI.doSomething();
    var resultObject = { error: false };
    if (resultObject.error) {
        // 処理が失敗した場合
        response.sendMessageBodyString(ImJson.toJSONString({
            error: resultObject.error,
            errorMessage: resultObject.message,
            detailMessages: ['管理者にお問い合わせください', '連絡先：admin@xxx.xxx.xxx']
        }));
    }

    // 処理が成功した場合
    response.sendMessageBodyString(ImJson.toJSONString({
        error: false,
        errorMessage: '',
        successMessage: '登録しました'
    }));
}

<script>
//
// 使用例
//
// ボタンをクリックすると somewhere/ajax へデータを Ajax で送信し、成功したときに next/page へ遷移する例です。

// Presantation Page
// ボタンをクリックすると、somewhere/ajax へ Ajax でデータを送信する。
// 成功した場合 next/page へ遷移する
$(document).ready(function() {
    $('#button').click(function() {
        imuiAjaxSubmit('#form', 'POST', 'json', 'next/page');
    });
});
</script>
<form id="form" action="somewhere/ajax">
    <input type="text" name="text1" />
    <input type="text" name="text2" />
    <input type="button" id="button" value="Submit" />
</form>

// サーバ側 (Ajax での送信先: somewhere/ajax)
function init(request) {
    Debug.console(request);

    var response = Web.getHTTPResponse();
    response.setContentType('application/json; charset=utf-8');

    // var resultObject = SomeAPI.doSomething();
    var resultObject = { error: false };
    if (resultObject.error) {
        // 処理が失敗した場合
        response.sendMessageBodyString(ImJson.toJSONString({
            error: resultObject.error,
            errorMessage: resultObject.message,
            detailMessages: ['管理者にお問い合わせください', '連絡先：admin@xxx.xxx.xxx']
        }));
    }

    // 処理が成功した場合
    response.sendMessageBodyString(ImJson.toJSONString({
        error: false,
        errorMessage: '',
        successMessage: '登録しました',
        parameter: {
            param1: 'value1',
            param2: 'value2',
            array1: ['array1','array2','array3']
        }
    }));
}

// サーバ側 (遷移先: next/page.js)
function init(request) {
    Debug.console(request); // { param1: 'value1', param2: 'value2', array1: ['array1','array2','array3'] }
}

//
// keys の使い方
//
// #form 内の input タグの name 属性を keys に指定することで次画面へ送信できます。
// この例では、input type="hidden" name="text1" と input type="hidden" name="text2" の name と value を送信します。

// クライアント側
// ボタンをクリックすると、somewhere/ajax へ Ajax でデータを送信する。
// 成功した場合 next/page へ遷移する
$(document).ready(function() {
    $('#button').click(function() {
        imuiAjaxSubmit('#form', 'POST', 'json', 'next/page', ['text1','text2']);
    });
});
<form id="form" action="somewhere/ajax">
    <input type="hidden" name="text1" value="v1" />
    <input type="hidden" name="text2" value="v2" />
    <input type="button" id="button" value="Submit" />
</form>

// サーバ側 (遷移先: next/page.js)
function init(request) {
    Debug.console(request); // { text1: 'v1', text2: 'v2', param1: 'value1', param2: 'value2', array1: ['array1','array2','array3'] }
}

//
// beforeSend, complete の使い方
//
// この例では、beforeSend と complete の両方を使って Ajax の通信中に通信中であることを示す画像を表示します。
imuiAjaxSubmit('#form', 'POST', 'json', 'next/page', [],
    function() {
        $(document.body).imuiIndicator(); // imuiIndicator を表示
    },
    function() {
        $(document.body).imuiIndicator('destroy'); // imuiIndicator を非表示
    }
);

//
// beforeSend を使用せずに complete だけを指定する場合
//
// この例では、Ajax の処理が完了したら alert を実行します。
imuiAjaxSubmit('#form', 'POST', 'json', 'next/page', [],
    $.noop, // 空の function を指定します。
    function() {
        alert('処理完了');
    }
);

//
// メッセージをクリックするまで消えないようにする場合
//
// duration に 0 を指定することで自動的に非表示になりません。
imuiAjaxSubmit('#form', 'POST', 'json', 'next/page', [], $.noop, $.noop, true, 0);

//
// 組み合わせた例
//
// バリデーションチェック、確認ダイアログを組み合わせた例です。

// サーバサイドバリデーションの定義ファイル (validator.js)
// input name="text1" に対して必須チェックを定義します。
var init = {
    text1: {
        caption: 'CAP.SAMPLE.REQUIRED',
        required: true
    }
}

// Presentation Page
<imart type="head">
  <script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
  <script src="ui/js/imui-form-util.js"></script>
</imart>

<!-- 上記サーバサイドバリデーションの定義ファイルを読み込みます。 -->
<imart type="imuiValidationRule" rule="validator#init" rulesName="rules" messagesName="messages"/>

<script>
$(document).ready(function() {
    // 登録/更新ボタンクリック
    $('#button').click(function() {
        // バリデーションチェック
        if (imuiValidate('#form', rules, messages)) {
            // 確認ダイアログ表示
            imuiConfirm(
                '<imart type="string" value=message/>', // メッセージ
                '<imart type="string" value=title/>', // タイトル
                function() { // OKクリック時のコールバック関数
                     // Ajaxでのデータ送信と次画面への遷移
                    imuiAjaxSubmit('#form', 'POST', 'json', 'next/page',['text1'],
                        function() {
                            $(document.body).imuiIndicator(); // imuiIndicator を表示
                        },
                        function() {
                            $(document.body).imuiIndicator('destroy'); // imuiIndicator を非表示
                        }
                    );
                }
            );
        }
    });
});
</script>

<form id="form" action="somewhere/ajax">
    <input type="text" name="text1" />
    <input type="text" name="text2" />
    <input type="button" id="button" value="Submit" />
</form>

// サーバ側 (Ajax での送信先: somewhere/ajax)
function init(request) {
    Debug.console(request);

    var response = Web.getHTTPResponse();
    response.setContentType('application/json; charset=utf-8');

    // var resultObject = SomeAPI.doSomething();
    var resultObject = { error: false };
    if (resultObject.error) {
        // 処理が失敗した場合
        response.sendMessageBodyString(ImJson.toJSONString({
            error: resultObject.error,
            errorMessage: resultObject.message,
            detailMessages: ['管理者にお問い合わせください', '連絡先：admin@xxx.xxx.xxx']
        }));
    }

    // 処理が成功した場合
    response.sendMessageBodyString(ImJson.toJSONString({
        error: false,
        errorMessage: '',
        successMessage: '登録しました',
        parameter: {
            param1: 'value1',
            param2: 'value2',
            array1: ['array1','array2','array3']
        }
    }));
}

// サーバ側 (遷移先: next/page.js)
var text1;
function init(request) {
    Debug.console(request); // { param1: 'value1', param2: 'value2', array1: ['array1','array2','array3'] }
    text1 = request.text1;
}

// サーバ側 (遷移先: next/page.html)
<div class="imui-title">
    <h1>imuiFormUtil Sample</h1>
</div>
<label>text1 : </label><span><imart type="string" value=text1/></span>

imuiAlert('エラーが発生しました', 'エラー');

// メッセージをエスケープしない場合
imuiAlert('エラーが発生しました。<br/>管理者にご連絡ください。', 'エラー', false);

imuiConfirm('登録してもよろしいですか？', '登録確認', function() {
    imuiAjaxSend('#form', 'POST', 'json');
});

// cancel だけ指定したい場合
imuiConfirm('登録してもよろしいですか？', '登録確認',
    $.noop, // 空の関数を指定します。
    function() {
        alert('キャンセルしました');
    }
);

imuiConfirm('登録してもよろしいですか？<br/>対象ID : xxx', '登録確認',
    function() {
        imuiAjaxSend('#form', 'POST', 'json');
    },
    $.noop, // キャンセルクリック時のコールバック関数
    false
);

//キャンセルボタンにフォーカスを当てたい場合
imuiConfirm('登録してもよろしいですか？<br/>対象ID : xxx', '登録確認',
    function() {
        imuiAjaxSend('#form', 'POST', 'json');
    },
    $.noop, // キャンセルクリック時のコールバック関数
    false,
    true //キャンセルボタンにフォーカスを当てる(true)
);

imuiDisableOnSubmit('#form');

// 有効にするまでの時間を指定する場合
imuiDisableOnSubmit('#form', 100); // 100ms

// 組み合わせた例
<script>
  (function($) {
    $(document).ready(function() {
      imuiDisableOnSubmit('#form');
      $('#submit-button').click(function(e) {
        // コンファームの結果により submit させるため、一度イベントを中断します
        e.preventDefault();
        // コンファームを表示させます
        imuiConfirm('登録しても良いですか?', '確認', function() {
          $('#form').submit();
        });
      });
    });
  })(jQuery);
</script>
<form id="form">
  <!-- 汎用ボタンではdisabledの対象にならないためsubmitボタンを配置します -->
  <input id="submit-button" type="submit" value="登録" />
</form>

// #form はバリデーション対象のフォームのセレクタを指定してください。
imuiResetForm('#form');

$.ajax(
    {
         ...,
         headers: { 'x-jp-co-intra-mart-ajax-request-from-imui-form-util': 'true'},
         error: imuiTransitionToErrorPage,
         ...
    }
)

// 独自のエラー処理を行いつつエラー画面へ遷移したい場合
//
// 上記サンプルでは、エラー画面へ遷移するだけで他の処理は行えません。
// 独自の処理を追加したい場合は以下のように実装できます。
$.ajax(
    {
        ...,
        headers: { 'x-jp-co-intra-mart-ajax-request-from-imui-form-util': 'true' },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            //
            // 独自の処理を実行
            //

            imuiTransitionToErrorPage(jqXHR, textStatus, errorThrown);
        },
        ...
    }
)

// imuiValidate の利用例

// サーバサイドバリデーションの定義ファイル (validator.js)
// input name="text1" に対して必須チェックを定義します。
var init = {
    text1: {
        caption: 'CAP.SAMPLE.REQUIRED',
        required: true
    }
}

// Presentation Page
<imart type="head">
  <script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
  <script src="ui/js/imui-form-util.js"></script>
</imart>

<!-- 上記サーバサイドバリデーションの定義ファイルを読み込みます。 -->
<imart type="imuiValidationRule" rule="validator#init" rulesName="rules" messagesName="messages"/>

<script>
$(document).ready(function() {
    // 登録/更新ボタンクリック
    $('#button').click(function() {
        // バリデーションチェック
        if (imuiValidate('#form', rules, messages)) {
            // 確認ダイアログ表示
            imuiConfirm(
                '<imart type="string" value=message/>', // メッセージ
                '<imart type="string" value=title/>', // タイトル
                function() { // OKクリック時のコールバック関数
                    imuiAjaxSend('#form', 'POST', 'json',
                        function() {
                            $(document.body).imuiIndicator(); // imuiIndicator を表示
                        },
                        function() {
                            $(document.body).imuiIndicator('destroy'); // imuiIndicator を非表示
                        }
                    ); // Ajaxでのデータ送信
                }
            );
        }
    });
});
</script>

<form id="form" action="somewhere/ajax">
    <input type="text" name="text1" />
    <input type="text" name="text2" />
    <input type="button" id="button" value="Submit" />
</form>

// errorPlacement の標準の実装は以下の通り
// バリデーションに失敗時のメッセージを表示する場所を決定する関数
errorPlacement: function(error, element) {
    // imuiCombobox
    if ($(element).parent().hasClass('imui-combobox')) {
        error.insertAfter($(element).parent());
    // imuiRealCombobox
    } else if ($(element).parent().hasClass('imui-realcombobox')) {
        error.insertAfter($(element).parent());
    // radio
    } else if ($(element).attr('type') == 'radio') {
        error.insertAfter($(element).siblings(':last'));
    // checkbox
    } else if ($(element).attr('type') == 'checkbox') {
        error.insertAfter($(element).siblings(':last'));
    } else {
        // そうでない場合は、デフォルトと同じ動作。
        error.insertAfter(element);
    }
}

// エラーメッセージを要素の上に表示したい場合、errorPlacement を以下のように指定します。
imuiValidate('#form', rules, messages,
    function(error, element) {
        error.insertBefore(element);
    }
);

//他の要素の操作でバリデーション対象の値が変わる場合、イベントを発生させることでバリデーションを実行できます。
//input 要素の focusin, focusout, keyup, input イベントにバリデーションの実行がバインドされます。
//input[type=radio], input[type=checkbox], select, option の場合は click イベントにバインドされます。
function select() {
    //日付を選択せずに「Submit」ボタンを押すと、バリデーションエラーが発生します。
    //カレンダーから日付を選択したときに次の文を実行しないと、バリデーションエラーのエラーメッセージが表示されたままになります。
    $('#sample-textbox').trigger('input');
}
<form id="form">
  <input type="text" name="text1" id="sample-textbox" />
  <imart type="imuiCalendar" floatable="true" altField="#sample-textbox" onSelect="select"/>
  <input type="button" id="button" value="Submit" />
</form>