6.5.1. バリデーション¶
jQuery Validation を利用したクライアント側でのバリデーションをかけることができます。バリデーションをかける場合、通常はクライアント側とサーバ側の両方にバリデーションを実装します。Jssp Validator と連携すると、サーバ側に設定ファイルを書くだけでサーバ側とクライアント側の両方に共通なバリデーションを行います。なお、クライアント側だけで完結させることも可能です。この場合は、jQuery Validation の記述方法に則ったルール、メッセージをクライアント側で実装してください。
注意
Jssp Validatorはスクリプト開発モデルのみで利用できます。
項目
6.5.1.1. 前提¶
バリデーションは jQuery Validation Plugin を利用します。ライブラリは自動的に読み込まれません。バリデーションを利用する際は以下のような実装を行ってください。
1 2 3 | <imart type="head">
<script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
</imart>
|
6.5.1.2. JSSP Validation と連携する場合¶
Jssp Validator の設定ファイルをクライアント側に読み込み、jQuery Validation Plugin の設定に変換することで、サーバ側とクライアント側とでバリデーションのルールを共有できます。共有するには、バリデーション設定ファイル の記述、imuiValidationRule タグの記述、imuiValidate 関数の呼び出しが必要です。
注意
JSSP Validationに独自に追加したバリデーションルールは、クライアント側で共有できません。
クライアント側で同じバリデーションを行いたい場合は、クライアント側でも同様のルールを定義してください。
クライアント側のカスタムバリデーションについては クライアントサイド JavaScript の imuiAddValidationRule を参照してください。
6.5.1.2.1. 実装例¶
以下のような HTML を例に取り、 user_cd に対して user_cd バリデーションをかけます。
1 2 3 4 5 6 | <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>
|
6.5.1.2.1.1. バリデーション設定ファイルの記述¶
項目 user_cd に対して userCd バリデーションをかける、というバリデーション設定ファイルを作成します。バリデーション設定ファイルとして以下のようなファイルを WEB-INF/jssp/src/validator/sample.js として保存します。設定ファイルの内容の詳細は バリデーションルール を参照してください。
1 2 3 4 5 6 | var init = {
'user_cd': {
caption: 'user_cd',
userCd: true
}
}
|
コラム
JSSP Validator の「 file 」「 mimeType 」ルールは クライアントサイド JavaScript バリデーション（ imuiValidate ）では動作しませんので注意してください。
6.5.1.2.1.2. imuiValidationRule タグの記述¶
上記で作成したバリデーション設定ファイルを読み込むために、imuiValidationRule タグを HTML に追記します。imuiValidationRule タグの rule 属性に、バリデーション設定ファイルのパスを指定します。また、後述の imuiValidate 関数の引数となる rulesName, messagesName 属性も指定します。
1 2 3 4 5 6 7 8 9 10 | <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 タグの内部に書いてはいけません。
6.5.1.2.1.3. imuiValidation 関数の記述¶
バリデーションを実行するため、imuiValidate 関数の呼び出しを追記します。imuiValidate 関数の引数に、form の id 、 imuiValidationRule タグの rulesName 、 messagesName に指定した値の３つを指定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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 ボタンをクリックするとエラーが表示されます。
6.5.1.3. クライアント側だけで完結させる場合¶
クライアント側だけで完結させる場合、jQuery Validation Plugin のルール、メッセージの指定の仕方に則って実装します。使用できるバリデーションルールは、バリデーション設定ファイル と同様です。
6.5.1.3.1. 実装例¶
バリデーションのルールと、バリデーションの結果、チェックにかかった場合のメッセージを指定します。指定しない場合、メッセージは英語で表示されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var rules = {
user_cd: {
required: true,
minlength: 5,
}
};
var messages = {
user_cd: {
required: '必須です',
minlength: '少なくとも5文字必要です'
}
};
imuiValidate(
'#account', // 送信するフォームのID
rules, // バリデーションルール
messages // バリデーションメッセージ
);
|
上記のように指定した場合、user_cd のバリデーションルールに該当した際に、同じキーのメッセージが表示されます。
6.5.1.4. バリデーションをリセットする方法¶
- imuiValidate を実行すると、対象フォームに対し常にチェックをかけるようになるため、一度投稿処理をしてからでも、画面を再読込みしない限り常にチェックがかかります。
この動作を変える必要がある場合、imuiResetForm メソッドでチェックをかけた form を初期化してください。
1 2 3 4 5 6 7 8 9 | ...
// バリデーションチェック
if (imuiValidate('#form', rules, messages)) {
// バリデーションチェックに成功したら投稿処理
doSomething();
// バリデーションのリセット
imuiResetForm('#form');
}
...
|