バリデーション設定ファイルの記述¶

項目 user_cd に対して userCd バリデーションをかける、というバリデーション設定ファイルを作成します。

バリデーション設定ファイルとして以下のようなファイルを WEB-INF/jssp/src/validator/sample.js として保存します。

設定ファイルの内容の詳細は バリデーションルール を参照してください。

var init = {
    'user_cd': {
        caption: 'user_cd',
        userCd: true
    }
}

コラム

JSSP Validator の「file」「mimeType」ルールは クライアントサイド JavaScript バリデーション（imuiValidate）では動作いたしませんのでご注意ください。

imuiValidationRule タグの記述¶

上記で作成したバリデーション設定ファイルを読み込むために、imuiValidationRule タグを HTML に追記します。

imuiValidationRule タグの rule 属性に、バリデーション設定ファイルのパスを指定します。

また、後述の imuiValidate 関数の引数となる rulesName, messagesName 属性も指定します。

<imart type="head">
    <script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
    <imart type="imuiValidationRule" rule="validator/sample#init" rulesName="rules" messagesName="messages"></imart>
</imart>
<div class="imui-form-container">
    <form id="sampleform" name="sampleform">
        <input type="text" name="user_cd"/>
        <input type="button" id="validate-button" value="validate"/>
    </form>
</div>

コラム

imuiValidationRule タグは script タグを出力するので、script タグの内部に書いてはいけません。

imuiValidation 関数の記述¶

バリデーションを実行するため、imuiValidate 関数の呼び出しを追記します。

imuiValidate 関数の引数に、form の id, imuiValidationRule タグの rulesName, messagesName に指定した値の３つを

指定します。

  <imart type="head">
      <script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
      <imart type="imuiValidationRule" rule="validator/sample#init" rulesName="rules" messagesName="messages"></imart>
      <script type="text/javascript">
      jQuery(document).ready(function() {
          jQuery('#validate-button').click(function() {
              imuiValidate('#sampleform', rules, messages);
          });
      });
      </script>
  </imart>
  <div class="imui-form-container">
      <form id="sampleform" name="sampleform">
          <input type="text" name="user_cd"/>
          <input type="button" id="validate-button" value="validate"/>
      </form>
  </div>

テキストボックスにひらがなを入力し、validate ボタンをクリックするとエラーが表示されます。