Validation
Webアプリケーションにの入力画面には、個数を入力するフィールドに数字以外の値が入力されていないか、指定した以外の文字列が使用されていないか、 というように、入力フォームの値が適切であるかをチェックする機能があります。この機能は、妥当性検査またはValidationと呼ばれます。
required属性
サンプル・アプリケーションでは、会計処理手続きのユーザー情報の入力時に、dijit.form.ValidationTextBoxを使用して入力データのチェックをしています。 ValidationTextBoxウィジェットにはrequired属性があり、その値を"true"にすると、その入力フィールドは必須項目として扱われます。 会社名以外のフィールドは、必須項目として扱うため、それらのフィールドのrequired属性の値をtrueにしています。
<tr>
<td><label for="userName">氏名:</label></td>
<td><div dojoType="dijit.form.ValidationTextBox" id="userName"
required="true"></div></td>
</tr>
<tr>
<td><label for="zipCode">郵便番号：</label></td>
<td><div dojoType="dijit.form.ValidationTextBox" id="zipCode"
required="true" regExp="\d{3}-\d{4}" maxLength="8"
promptMessage="(例:100-1000)" invalidMessage=""
style="width: 8em;"></div></td>
</tr>
...
required属性がtrueのフィールドに値が指定されていないと、図4のようにフィールドの見た目が変わり、さらに必須項目が未入力であることを伝えるツール・チップが表示されます。
regExp属性
dijit.form.ValidationTextは、正規表現を用いて制約を指定することもできます。 サンプル・アプリケーション内の電話番号やクレジットカードの番号の入力フォームでは、正規表現で特定の文字が正しいフォーマットで入力されているかを確認しています。 正規表現は、reqExp属性を使って指定します。 例えば、16桁のクレジットカード番号を4桁ずつ"-"（ハイフン）区切りで入力させたい場合は、リスト17のようにregExp属性の値を指定します。
<td><div dojoType="dijit.form.ValidationTextBox" id="cardNo"
required="true" regExp="\d{4}-\d{4}-\d{4}-\d{4}" maxLength="19"
promptMessage="(例:1234-5678-9012-3456)" invalidMessage=""
style="width: 19em;"></div>
</td>
promptMessage属性とinvalidMessage属性
リスト17では、promptMessage属性とinvalidMessage属性を指定しています。 promptMessageはフィールドがフォーカスされたときに表示されるツール・チップのメッセージです。 何も指定しない場合はDojoが提供しているデフォルトのメッセージが表示されます。 invalidMessage属性は、Validationでエラーが起きたときに表示されるメッセージです。 invalidMessage属性をブランクにすると、promptMessageの値がinvalidMessageとして使われます。 図5は電話番号のpromptMessageです。
isValidメソッド
各フィールドの妥当性はdijit.form.ValidationTextBoxのisValidメソッドを呼ぶことで確認できます。 リスト18は、「OK」ボタンが押されたときのイベント・ハンドラーです。必須フィールドのisVaidメソッドがtrueを返さないときは、エラー・ダイアログを表示します。 会計画面に存在する7つ全ての必須フィールドのisValidメソッドがtrueを返すときのみ購入手続き完了処理を行っています。
doSubmit: function() {
var errorField = null;
if(!dijit.byId("userName").isValid()) {
errorField = dijit.byId("userName");
} else if(!dijit.byId("zipCode").isValid()) {
errorField = dijit.byId("zipCode");
} else if(!dijit.byId("userAddress").isValid()) {
errorField = dijit.byId("userAddress");
} else if(!dijit.byId("phoneNumber").isValid()) {
errorField = dijit.byId("phoneNumber");
} else if(!dijit.byId("cardNo").isValid()) {
errorField = dijit.byId("cardNo");
} else if(!dijit.byId("cardOwner").isValid()) {
errorField = dijit.byId("cardOwner");
} else if(!dijit.byId("validPeriod").isValid()) {
errorField = dijit.byId("validPeriod");
}
if(errorField) {
errorField.focus();
sampleApp.showSimpleDlg("入力値が正しくありません。", "入力エラー");
} else {
sampleApp.cart.clearAllList();
dijit.byId("submitDlg").hide();
sampleApp.showSimpleDlg("購入手続きが完了しました。", "確認");
}
},
入力フォームの構成方法
サンプル・アプリケーションではValidation機能の紹介のため、電話番号やクレジット・カード番号および有効期限のValidationに正規表現を使用し、 またpromptMessageを利用して入力フォーマットをユーザーに通知しています。 複雑な正規表現で入力値を制限するような場合は、入力フィールドを分割することで個々の制約を簡略化することを検討してください。 例えば、郵便番号、カード番号、有効期限を図6のようなフィールドで入力させることもできます。
上記の例では、各入力フィールドのValidationは数字以外の入力の検出のみでOKです。 ただし、入力フィールドを分割することで、サーバーへ送信するデータの数やフォーマットが、分割する前とは異なる点に注意してください。 サーバー側で受け入れるデータのフォーマットを変換するか、 クライアント側で先のデータ・フォーマットと同じデータ・フォーマットに変換する必要があります。
その他の便利なウィジェット
Dojoには他にも様々なフォーム・ウィジェットが用意されています。 dijit.form.NumberSpinnerは数字を入力させるのに便利なフォーム・ウィジェットです。 スピン・コントロールを利用して入力値を変更することができます。 サンプル・アプリケーションでは、購入数の指定にこのウィジェットを使用しています。
<label for="numOfProduct">数量：<label>
<div dojoType="dijit.form.NumberSpinner" id="numOfProduct"
constraints="{max:10,min:1}"
style="width:50px;"></div>
NumberSpinnerを使えば、入力値に数字以外のものを指定するとinvalidErrorが表示されます。 また、constraints属性で最大値や最小値を指定することもできます。
その他のValidation機能の使用例については、こちらを参照してください。
図8および図9は、サンプル・アプリケーションの実行画面です。
まとめ
今回はウィジェット利用の基礎編としてテーマ、ウィジェットの配置からイベント処理までに必要な項目と、サンプルのオンライン・ブックストアを通じて実際の利用例をおさらいしました。Dijitの基本的なウィジェットを利用することでさまざまなアプリケーションを作成することができます。
さらに複雑なウェブ・アプリケーションを作るには標準のDijitウィジェットを利用するだけでは難しいと感じるかもしれません。次回以降では高度なトピックとして、ウィジェットの自作を含むウィジェット・システムの高度な話題、レイアウト・ウィジェットの詳細などが続きます。ご期待ください。
