Built-In Namespace _global_

Instance members

Instance MethodsDefined By

imspAddValidationRule ( String name, function method, String/function message ) _global_
指定された関数をバリデーションルールとして登録します。

詳細は jQuery Validation Pluginを参照してください。
Parameters
name : String
バリデーションのメソッド名
method : function
バリデーションルール
message : String/function
デフォルトメッセージ
imspAjaxSend ( HTMLForm form, String method, String dataType, [function(jqXHR/settings) beforeSend], [function(jqXHR/textStatus) complete], [Boolean closable], [number duration], [boolean escape], [function(dataReceived/textStatus/jqXHR) successcallback], [function(jqXHR/textStatus/errorThrown) errorcallback], [Boolean suppressmessage], [Boolean transitionToErrorPage] ) _global_
指定されたパラメータに従って、データをAjaxで送信します。

送信が成功した場合、メッセージを表示します。
Parameters
form : HTMLForm
validate から渡されるフォーム
method : String
データを送信するメソッド (GET/POST)
dataType : String
データを受信する際のデータフォーマット (json/xml) (jsonp, html, scriptには対応していません)
beforeSend : function(jqXHR/settings)
Optional
データ送信の前に呼ばれるCallback関数
complete : function(jqXHR/textStatus)
Optional
データ送信が完了したときに呼ばれるCallback関数
closable : Boolean
OptionalDefault: true
メッセージ表示領域を明示的に閉じることができるかどうかのフラグ。durationが0以下の場合強制的にtrueになります。 (true: クリックで閉じる、false: クリックしても閉じない)
duration : number
OptionalDefault: 10000
メッセージ表示領域が自動的に閉じるまでの時間。0 を指定すると自動的に閉じないようになります。 (ms)
escape : boolean
OptionalDefault: false
メッセージをエスケープするかどうかのフラグ。(true: エスケープする、false: エスケープしない)
successcallback : function(dataReceived/textStatus/jqXHR)
OptionalDefault: $.noop
データ送信が成功したときに呼ばれるCallback関数。8.0.8 から指定できるようになりました。
errorcallback : function(jqXHR/textStatus/errorThrown)
OptionalDefault: $.noop
データ送信が失敗したときに呼ばれるCallback関数。8.0.8 から指定できるようになりました。
suppressmessage : Boolean
OptionalDefault: false
メッセージ表示を抑制するフラグ。8.0.8 から指定できるようになりました。(true: 表示を抑制する、false: 表示を抑制しない)
transitionToErrorPage : Boolean
OptionalDefault: false
エラー画面へ遷移するかどうかを制御するフラグ。8.0.8 から指定できるようになりました。(true: エラー画面へ遷移する、false: エラー画面へ遷移しない)
//更新ボタンクリック
$('#submit-button').click(function() {
    //バリデーションチェック
    if (imspValidate('#form', rules, messages)) {
        //確認ダイアログ表示
        $.imspFormUtil.confirm(
            '', //メッセージ
            '', //タイトル
            function() { //OKクリック時のコールバック関数
                imspAjaxSend('#form', 'POST', 'json'); //Ajaxでのデータ送信
            }
        );
    }
});
imspAjaxSubmit ( HTMLForm form, String method, String dataType, String action, [String[] keys], [function(jqXHR/settings) beforeSend], [function(jqXHR/textStatus) complete], [Boolean closable], [number duration], [boolean escape], [function(dataReceived/textStatus/jqXHR) successcallback], [function(jqXHR/textStatus/errorThrown) errorcallback], [Boolean suppressmessage] ) _global_
指定されたパラメータに従って、データの送信を行います。

送信が成功した場合、指定された action に対して submit を行います。
Parameters
form : HTMLForm
validate から渡されるフォーム
method : String
データを送信するメソッド (GET/POST)
dataType : String
データを受信する際のデータフォーマット (json/xml) (jsonp, html, scriptには対応していません)
action : String
データ送信に成功した際の遷移先
keys : String[]
Optional
データ送信に成功した際の遷移先に送信する要素のname
beforeSend : function(jqXHR/settings)
Optional
データ送信の前に呼ばれるCallback関数
complete : function(jqXHR/textStatus)
Optional
データ送信が完了したときに呼ばれるCallback関数
closable : Boolean
OptionalDefault: true
メッセージ表示領域を明示的に閉じることができるかどうかのフラグ。durationが0以下の場合強制的にtrueになります。 (true: クリックで閉じる、false: クリックしても閉じない)
duration : number
OptionalDefault: 10000
メッセージ表示領域が自動的に閉じるまでの時間。0 を指定すると自動的に閉じないようになります。 (ms)
escape : boolean
OptionalDefault: false
メッセージをエスケープするかどうかのフラグ。(true: エスケープする、false: エスケープしない)
successcallback : function(dataReceived/textStatus/jqXHR)
OptionalDefault: $.noop
データ送信が成功したときに呼ばれるCallback関数。8.0.8 から指定できるようになりました。
errorcallback : function(jqXHR/textStatus/errorThrown)
OptionalDefault: $.noop
データ送信が失敗したときに呼ばれるCallback関数。8.0.8 から指定できるようになりました。
suppressmessage : Boolean
OptionalDefault: false
メッセージ表示を抑制するフラグ。8.0.8 から指定できるようになりました。(true: 表示を抑制する、false: 表示を抑制しない)
//登録/更新ボタンクリック
$('#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 ( String message, [String title], [Boolean escape] ) _global_
警告ダイアログを表示します。

OKボタンが表示されます。
Parameters
message : String
確認メッセージ
title : String
Optional
ダイアログのタイトル
escape : Boolean
OptionalDefault: true
メッセージをエスケープする・しないのフラグ ( true: エスケープする、false: エスケープしない )
imspAlert('エラーが発生しました', 'エラー');
// メッセージをエスケープしない場合
imspAlert('エラーが発生しました。<br/>管理者にご連絡ください。', 'エラー', false);
imspConfirm ( String message, [String title], [Function ok], [Function cancel], [Boolean escape] ) _global_
確認ダイアログを表示します。

OKボタンとCancelボタンが表示されます。
コールバック関数の指定の有無にかかわらず、どちらのボタンを押してもダイアログは閉じます。
コールバック関数の内部でダイアログを閉じる実装は不要です。
Parameters
message : String
確認メッセージ
title : String
Optional
ダイアログのタイトル
ok : Function
Optional
OKボタンクリック時のコールバック関数
cancel : Function
Optional
Cancelボタンクリック時のコールバック関数
escape : Boolean
OptionalDefault: true
メッセージをエスケープする・しないのフラグ ( true: エスケープする、false: エスケープしない )
imspConfirm('登録してもよろしいですか?', '登録確認', function() {
    imspAjaxSend('#form', 'POST', 'json');
});
// cancel だけ指定したい場合
imspConfirm('登録してもよろしいですか?', '登録確認',
    $.noop, // 空の関数を指定します。
    function() {
        alert('キャンセルしました');
    }
);
imspConfirm('登録してもよろしいですか?<br/>対象ID : xxx', '登録確認',
    function() {
        imspAjaxSend('#form', 'POST', 'json');
    },
    $.noop, // キャンセルクリック時のコールバック関数
    false
);
imspDisableOnSubmit ( String form, [Number timeout] ) _global_
2度押し防止機能を提供します。

指定されたformからサブミット要素を検索し、サブミットを実行するとサブミット要素を無効 ( disabled ) にします。
指定された時間が経過すると、サブミット要素を有効 ( disabled=false ) にします。
注意事項
  • imspDisableOnSubmitはimspAjaxSubmit利用時には動作しないためフォームサブミットで利用してください
Parameters
form : String
2度押し防止対象のフォームのセレクタ
timeout : Number
OptionalDefault: 3000
再度サブミットができるまでの時間。1 より小さい値を指定しても 3000 を指定したことになります。 (ms)
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>
imspResetForm ( String form ) _global_
バリデーションの結果をリセットします。

バリデーションを実行すると、実行時以降自動的にバリデーションチェックが行われます。
画面遷移を行わず Ajax でデータをサーバに送信するという画面の場合、送信後にこの関数を呼び出すことでバリデーションの実行をリセットします。
リセットするとバリデーションの自動実行が停止され、かつバリデーションエラーが非表示になります。
また、バリデーションルール、メッセージが削除されます。
Parameters
form : String
リセット対象のフォームのセレクタ
// #form はバリデーション対象のフォームのセレクタを指定してください。
imspResetForm('#form');
imspTransitionToErrorPage ( Object jqXHR, String textStatus, String errorThrown ) _global_
Ajax通信でサーバエラーが発生したにエラー画面へ遷移させるためのコールバック関数です。

サーバ側で例外が発生するとエラー画面が呼び出されます。

Ajax のリクエストの場合、エラー画面のレスポンスは Ajax 内で閉じるため画面にエラーが表示されません。
Ajax のリクエストでもエラー画面に遷移させたい場合、この関数を jQuery.ajax() の error プロパティにセットしてください。
また、同時に headers プロパティに 'x-jp-co-intra-mart-ajax-request-from-imsp-form-util': 'true' もセットしてください。
Parameters
jqXHR : Object
jQuery XHR オブジェクト
textStatus : String
ステータス
errorThrown : String
送信されたエラー
$.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);
        },
        ...
    }
)
imspValidate ( HTMLForm form, Object rules, Object messages, [String ignore], [function(error/element) errorPlacement] ) : boolean _global_
指定されたルールに従って、バリデーションを行います。

バリデーションの対象は、後述の rules で指定された input, select, textarea タグです。
ただし、submit, reset, image の各要素、disabled 属性が指定されている要素と、後述の ignore で指定された要素は対象外です。
バリデーションに失敗した場合、指定されたメッセージが表示されます。
バリデーションに成功した場合trueを、失敗した場合falseを返します。

標準ではバリデーションエラーが発生したとき各要素の下にエラーメッセージが表示されます。
エラーメッセージを表示する場所を変更したい場合、errorPlacement に関数を指定し、その関数の中でエラーメッセージを表示するように実装します。

errorPlacement に渡される引数の error はエラーメッセージが含まれる label, element はバリデーションエラーが発生した要素そのものです。

この関数は内部で jQuery Validation Pluginを利用しているため、 <script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script> を記述する必要があります。
Parameters
form : HTMLForm
バリデーション対象のフォーム
rules : Object
バリデーションルール。ルールの詳細はサーバサイドのエラー処理を参照してください。
messages : Object
バリデーション失敗時のメッセージ
ignore : String
OptionalDefault: :hidden
バリデーション対象外とする要素のセレクタ
errorPlacement : function(error/element)
Optional
バリデーションエラーが発生した際のメッセージを表示する関数
Returns
boolean
バリデーションに成功した場合trueを、失敗した場合falseを返します。
<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);
    });
imuiAddValidationRule ( String name, function method, [String/function message] ) _global_
指定された関数をバリデーションルールとして登録します。

詳細は jQuery Validation Pluginを参照してください。
Parameters
name : String
バリデーションのメソッド名
method : function
バリデーションルール
message : String/function
Optional
デフォルトメッセージ
// サーバサイドバリデーションの定義ファイル (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>
imuiAjaxSend ( HTMLForm form, String method, String dataType, [function(jqXHR/settings) beforeSend], [function(jqXHR/textStatus) complete], [Boolean closable], [Number duration], [Boolean escape], [function(dataReceived/textStatus/jqXHR) successcallback], [function(jqXHR/textStatus/errorThrown) errorcallback], [Boolean suppressmessage], [Boolean transitionToErrorPage] ) _global_
指定されたパラメータに従ってデータを Ajax で送信します。

Ajax での送信先で以下のようなレスポンスを返すことで、成功・失敗・警告のメッセージを表示することができます。
属性名説明必須国際化
error処理が失敗した場合 true、成功した場合 false を指定します。booleano-
warning警告メッセージを表示したい場合は true を指定します。
省略時は false の動作をします。
boolean--
successMessage処理成功時のメッセージ。error: false の場合表示されます。String--
errorMessage処理失敗時のメッセージ。error: true の場合表示されます。String--
warningMessage警告時のメッセージ。error の値に関係なく warning: true の場合表示されます。String--
detailMessages処理失敗時の詳細なメッセージ。error: true または warning: true の場合表示されます。String/String[]--

errorプロパティとwarningプロパティの組み合わせは以下のようになります。
返却するwarningとerrorプロパティの組み合わせにより表示されるメッセージの種類warning
truefalse
errortrue警告メッセージエラーメッセージ
false警告メッセージ成功メッセージ


imuiAjaxSubmit との違いは、送信が成功した後の画面遷移をするかどうかです。
この関数では送信が成功しても画面遷移は行いません。
imuiAjaxSubmit は、送信が成功したら指定された url に対して submit を行います。

Parameters
form : HTMLForm
validate から渡されるフォーム
method : String
データを送信するメソッド (GET/POST)
dataType : String
データを受信する際のデータフォーマット (json/xml) (jsonp, html, scriptには対応していません)
beforeSend : function(jqXHR/settings)
Optional
データ送信の前に呼ばれるCallback関数
complete : function(jqXHR/textStatus)
Optional
データ送信が完了したときに呼ばれるCallback関数
closable : Boolean
OptionalDefault: true
メッセージ表示領域を明示的に閉じることができるかどうかのフラグ。durationが0以下の場合強制的にtrueになります。 (true: クリックで閉じる、false: クリックしても閉じない)
duration : Number
OptionalDefault: 10000
メッセージ表示領域が自動的に閉じるまでの時間。0 を指定すると自動的に閉じないようになります。 (ms)
escape : Boolean
OptionalDefault: false
メッセージをエスケープするかどうかのフラグ。(true: エスケープする、false: エスケープしない)
successcallback : function(dataReceived/textStatus/jqXHR)
OptionalDefault: $.noop
データ送信が成功したときに呼ばれるCallback関数。8.0.8 から指定できるようになりました。
errorcallback : function(jqXHR/textStatus/errorThrown)
OptionalDefault: $.noop
データ送信が失敗したときに呼ばれるCallback関数。8.0.8 から指定できるようになりました。
suppressmessage : Boolean
OptionalDefault: false
メッセージ表示を抑制するフラグ。8.0.8 から指定できるようになりました。(true: 表示を抑制する、false: 表示を抑制しない)
transitionToErrorPage : Boolean
OptionalDefault: false
エラー画面へ遷移するかどうかを制御するフラグ。8.0.8 から指定できるようになりました。(true: エラー画面へ遷移する、false: エラー画面へ遷移しない)
//
// 使用例
//
// ボタンをクリックすると somewhere/ajax へデータを Ajax で送信します。

// Presantation 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: '登録しました'
    }));
}
imuiAjaxSubmit ( HTMLForm form, String method, String dataType, String/function(data) action, [String[] keys], [function(jqXHR/settings) beforeSend], [function(jqXHR/textStatus) complete], [Boolean closable], [Number duration], [Boolean escape], [function(dataReceived/textStatus/jqXHR) successcallback], [function(jqXHR/textStatus/errorThrown) errorcallback], [Boolean suppressmessage] ) _global_
指定されたパラメータに従ってデータを Ajax で送信し、送信が成功したら指定された url に対して submit を行います。

keys に値を指定すると form の中の input タグを検索し、値を action に指定された URL に送信します。
別の form の値を送信したい場合、action に 送信したい form のセレクタを返すように実装した function を指定してください。

Ajax での送信先で以下のようなレスポンスを返すことで、成功・失敗・警告のメッセージを表示することができます。
属性名説明必須国際化
error処理が失敗した場合 true、成功した場合 false を指定します。booleano-
warning警告メッセージを表示したい場合は true を指定します。
error: false の場合は画面遷移をした後に警告メッセージを表示し、error: true の場合は画面遷移せずに警告メッセージを表示します。
省略時は false の動作をします。
boolean--
successMessage処理成功時のメッセージ。error: false の場合表示されます。String--
errorMessage処理失敗時のメッセージ。error: true の場合表示されます。String--
warningMessage警告時のメッセージ。error の値に関係なく warning: true の場合表示されます。String--
detailMessages処理失敗時の詳細なメッセージ。error: true または warning: true の場合表示されます。String/String[]--
parameter処理成功後に遷移するページへ引き渡すパラメータです。
オブジェクトの value にオブジェクト、オブジェクトを含む配列を指定することはできません。
Object--

errorプロパティとwarningプロパティの組み合わせは以下のようになります。
返却するwarningとerrorプロパティの組み合わせにより表示されるメッセージの種類warning
truefalse
errortrue警告メッセージ(画面遷移しない)エラーメッセージ
false警告メッセージ(画面遷移する)成功メッセージ

imuiAjaxSend との違いは、送信が成功した後の画面遷移をするかどうかです。
この関数では、送信が成功(errorにfalseを指定)したら指定された url に対して submit を行います。
imuiAjaxSend は、送信が成功しても画面遷移は行いません。

Parameters
form : HTMLForm
validate から渡されるフォーム
method : String
データを送信するメソッド (GET/POST)
dataType : String
データを受信する際のデータフォーマット (json/xml) (jsonp, html, scriptには対応していません)
action : String/function(data)
データ送信に成功した際の遷移先。String を指定した場合 URL とみなし、form の action 属性に値を設定した上でサブミットを行います。Function を指定した場合、Function はサブミットしたい form のセレクタを返すように実装してください。セレクタが存在する場合サブミットを行います。存在しない場合は何も行いません。
keys : String[]
OptionalDefault: []
データ送信に成功した際の遷移先に送信する要素のname
beforeSend : function(jqXHR/settings)
OptionalDefault: $.noop
データ送信の前に呼ばれるCallback関数
complete : function(jqXHR/textStatus)
OptionalDefault: $.noop
データ送信が完了したときに呼ばれるCallback関数
closable : Boolean
OptionalDefault: true
メッセージ表示領域を明示的に閉じることができるかどうかのフラグ。durationが0以下の場合強制的にtrueになります。 (true: クリックで閉じる、false: クリックしても閉じない)
duration : Number
OptionalDefault: 10000
メッセージ表示領域が自動的に閉じるまでの時間。0 を指定すると自動的に閉じないようになります。 (ms)
escape : Boolean
OptionalDefault: false
メッセージをエスケープするかどうかのフラグ。(true: エスケープする、false: エスケープしない)
successcallback : function(dataReceived/textStatus/jqXHR)
OptionalDefault: $.noop
データ送信が成功したときに呼ばれるCallback関数。8.0.8 から指定できるようになりました。
errorcallback : function(jqXHR/textStatus/errorThrown)
OptionalDefault: $.noop
データ送信が失敗したときに呼ばれるCallback関数。8.0.8 から指定できるようになりました。
suppressmessage : Boolean
OptionalDefault: false
メッセージ表示を抑制するフラグ。8.0.8 から指定できるようになりました。(true: 表示を抑制する、false: 表示を抑制しない)
<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 ( String message, [String title], [Boolean escape] ) _global_
警告ダイアログを表示します。

OKボタンが表示されます。
注意事項
  • closeOnEscape="true" かつ modal="true" を指定したダイアログの中でこのコンポーネントを開いた後、オーバーレイ(黒い部分)をクリックしエスケープキーを押すとこのコンポーネントではなく1つ目のダイアログが閉じます。これを回避するには closeOnEscape="false" を指定してください。
Parameters
message : String
確認メッセージ
title : String
Optional
ダイアログのタイトル
escape : Boolean
OptionalDefault: true
メッセージをエスケープする・しないのフラグ ( true: エスケープする、false: エスケープしない )
imuiAlert('エラーが発生しました', 'エラー');
// メッセージをエスケープしない場合
imuiAlert('エラーが発生しました。<br/>管理者にご連絡ください。', 'エラー', false);
imuiConfirm ( String message, [String title], [Function ok], [Function cancel], [Boolean escape] ) _global_
確認ダイアログを表示します。

OKボタンとCancelボタンが表示されます。
コールバック関数の指定の有無にかかわらず、どちらのボタンを押してもダイアログは閉じます。
コールバック関数の内部でダイアログを閉じる実装は不要です。
注意事項
  • closeOnEscape="true" かつ modal="true" を指定したダイアログの中でこのコンポーネントを開いた後、オーバーレイ(黒い部分)をクリックしエスケープキーを押すとこのコンポーネントではなく1つ目のダイアログが閉じます。これを回避するには closeOnEscape="false" を指定してください。
Parameters
message : String
確認メッセージ
title : String
Optional
ダイアログのタイトル
ok : Function
OptionalDefault: $.noop
OKボタンクリック時のコールバック関数
cancel : Function
OptionalDefault: $.noop
Cancelボタンクリック、×ボタンクリック、エスケープキー押下時のコールバック関数
escape : Boolean
OptionalDefault: true
メッセージをエスケープする・しないのフラグ ( true: エスケープする、false: エスケープしない )
imuiConfirm('登録してもよろしいですか?', '登録確認', function() {
    imuiAjaxSend('#form', 'POST', 'json');
});
// cancel だけ指定したい場合
imuiConfirm('登録してもよろしいですか?', '登録確認',
    $.noop, // 空の関数を指定します。
    function() {
        alert('キャンセルしました');
    }
);
imuiConfirm('登録してもよろしいですか?<br/>対象ID : xxx', '登録確認',
    function() {
        imuiAjaxSend('#form', 'POST', 'json');
    },
    $.noop, // キャンセルクリック時のコールバック関数
    false
);
imuiDisableOnSubmit ( String form, [Number timeout] ) _global_
2度押し防止機能を提供します。

指定されたformからサブミット要素を検索し、サブミットを実行するとサブミット要素を無効 ( disabled ) にします。
指定された時間が経過すると、サブミット要素を有効 ( disabled=false ) にします。
注意事項
  • imuiDisableOnSubmitはimuiAjaxSubmit利用時には動作しないためフォームサブミットで利用してください
Parameters
form : String
2度押し防止対象のフォームのセレクタ
timeout : Number
OptionalDefault: 3000
再度サブミットができるまでの時間。1 より小さい値を指定しても 3000 を指定したことになります。 (ms)
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>
imuiResetForm ( String form ) _global_
バリデーションの結果をリセットします。

バリデーションを実行すると、実行時以降自動的にバリデーションチェックが行われます。
画面遷移を行わずAjaxでデータをサーバに送信するという画面の場合、送信後にこの関数を呼び出すことでバリデーションの実行をリセットします。
リセットするとバリデーションの自動実行が停止され、かつバリデーションエラーが非表示になります。
また、バリデーションルール、メッセージが削除されます。
Parameters
form : String
リセット対象のフォームのセレクタ
// #form はバリデーション対象のフォームのセレクタを指定してください。
imuiResetForm('#form');
imuiTransitionToErrorPage ( Object jqXHR, String textStatus, String errorThrown ) _global_
Ajax通信でサーバエラーが発生したにエラー画面へ遷移させるためのコールバック関数です。

サーバ側で例外が発生するとエラー画面が呼び出されます。

Ajax のリクエストの場合、エラー画面のレスポンスは Ajax 内で閉じるため画面にエラーが表示されません。
Ajax のリクエストでもエラー画面に遷移させたい場合、この関数を jQuery.ajax() の error プロパティにセットしてください。
また、同時に headers プロパティに 'x-jp-co-intra-mart-ajax-request-from-imui-form-util': 'true' もセットしてください。
Parameters
jqXHR : Object
jQuery XHR オブジェクト
textStatus : String
ステータス
errorThrown : String
送信されたエラー
$.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 ( String form, Object rules, Object messages, [String ignore], [function(error/element) errorPlacement] ) : boolean _global_
指定されたルールに従って、バリデーションを行います。

バリデーションの対象は、後述の rules で指定された input, select, textarea タグです。
ただし、submit, reset, image の各要素、disabled 属性が指定されている要素と、後述の ignore で指定された要素は対象外です。
バリデーションに失敗した場合、指定されたメッセージが表示されます。
バリデーションに成功した場合trueを、失敗した場合falseを返します。

標準では、バリデーションエラーが発生したとき各要素の下にエラーメッセージが表示されます。
エラーメッセージを表示する場所を変更したい場合、errorPlacement に関数を指定し、その関数の中でエラーメッセージを表示するように実装します。

errorPlacement に渡される引数の error はエラーメッセージが含まれる label, element はバリデーションエラーが発生した要素そのものです。

この関数は内部で jQuery Validation Pluginを利用しているため、 <script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script> を記述する必要があります。

バリデーションメッセージは強制的にエスケープされます。バリデーションメッセージにHTMLタグを書いて制御することはできません。 <span style="color: blue">項目名</span> のように指定しても、「項目名」は青い文字で表示されません。
Parameters
form : String
バリデーション対象のフォームのセレクタ
rules : Object
バリデーションルール。ルールの詳細はサーバサイドのエラー処理を参照してください。
messages : Object
バリデーション失敗時のメッセージ
ignore : String
OptionalDefault: :hidden
バリデーション対象外とする要素のセレクタ
errorPlacement : function(error/element)
Optional
バリデーションエラーが発生した際のメッセージを表示する関数
Returns
boolean
バリデーションに成功した場合trueを、失敗した場合falseを返します。
// 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>
lookAhead ( unknown match ) _global_
No description.
Parameters
match : unknown
No description.
workflowOpenPage ( String pageType:, Function callback: ) _global_
IM-Workflow の処理画面を表示します。
Parameters
pageType: : String
画面種別
callback: : Function
表示された処理画面が閉じられる際に呼び出されるJavascript関数。(省略可)
指定された関数が存在しない場合は実行しません。
workflowOpenPage4Sp ( String pageType:, Function callback: ) _global_
IM-Workflow スマートフォン用の処理画面を表示します。
Parameters
pageType: : String
画面種別
callback: : Function
表示された処理画面が閉じられる際に呼び出されるJavascript関数。(省略可)
指定された関数が存在しない場合は実行しません。