独自の入力値検証を追加してみた!
こんにちは。IISの田口です。
プリザンターでは必須入力チェックなどの基本的な入力値検証機能がありますが、
「名前カナ欄には全角カナだけを登録したい」
「2つの日付の前後関係をチェックしたい」
などの独自のチェックが欲しい場合が多いと思います。
4/24に追加された「javascriptのユーザイベントの戻り値によりスクリプトを中断する機能」を用いれば、スクリプトで独自チェックを実装し、NGだった場合は登録・更新を中断することが出来るようになりました。
週刊プリザンター第20号のサンプルのようなスクリプトですと、必須入力などのプリザンター標準の検証のエラーメッセージ表示とは異なり、alertでエラーメッセージを表示しています。
独自チェックでもプリザンター標準の検証と同じようなエラーメッセージにしたいですよね。
これが出来るのです!
Validationプラグインが勝利の鍵!
出来るのです!なんて言いましたが、実はソースコード読んだ方ならすぐに分かってしまう内容です。
プリザンターの必須入力チェックなどの入力値検証はValidationプラグインを利用しています。
ですので、Validateionプラグインをうまく使いこなせば、独自チェックもプリザンター標準のエラーメッセージと同じように表示することが出来ます。
サンプルです
以下のスクリプトを画面に設定しました。
$(function() { // カナチェック $.validator.addMethod( 'katakana', function(value, element){ return this.optional(element) || /^([ァ-ヶー]+)$/.test(value); }, '全角カタカナで入力してください。' ); // 日付前後チェック $.validator.addMethod( 'DateCompare', function(value, element){ var from = $('#Results_DateA').val(); var to = $('#Results_DateB').val(); return this.optional(element) || from <= to; }, '日付Fromは日付Toより過去日を入力してください。' ); // 分類Aにデフォルトのminlengthバリデータを設定(入力値が指定した桁数以上か) $p.getControl('ClassA').rules('add', { minlength: 3 }); // 分類Bにカスタムバリデータ「カナチェック」を設定 $p.getControl('ClassB').rules('add', { katakana: true }); // 日付A、日付Bにカスタムバリデータ「日付前後チェック」を設定 $p.getControl('DateA').rules('add', { DateCompare: true }); $p.getControl('DateB').rules('add', { DateCompare: true }); });
その結果が以下となります。
minlengthバリデータを設定した箇所のエラーメッセージが英語なのはデフォルトのバリデータをそのまま設定したためです。
メッセージを日本語に変更する方法やその他細かい設定内容については割愛しますので、興味のある方はValidateionプラグインの使い方を調べてください。
実は上記のスクリプトには弱点があります・・・
気づかれた方もいらっしゃるかと思いますが、上記サンプルスクリプトは$(function() {
(HTMLの読み込み終了後)で実装しています。
実はこのタイミングだと、前・次ボタンクリック時などのレコードの遷移にAjaxを使用する場合(テーブルの管理-エディタで設定)では遷移後にバリデータ設定が抜けてしまいます。
そのための対策というわけではないですが、現在プリザンターには$p.events.on_editor_load
(編集画面表示後)イベントハンドラが準備されています。
このイベントはhtml再読込/Ajax読み込みどちらも発火するので、画面表示後に処理したい内容は原則このイベントに実装すれば良いのですが、バリデータ設定はこのイベントではエラーになってしまいました。
私の力不足でこのエラーが解決できませんでしたので、もし解決策をご存じの方いらっしゃいましたら、是非ご教示ください!!!
「+読者になる」のお願い
プリザンターの他、C#によるWebアプリ開発もIISの得意とする領域です。今後もプリザンターの機能、拡張スクリプト、ページ追加の研究を進めて行くつもりです。関心のある方、よかったらブログ上部の「+読者になる」をクリックをお願いします!
最後に
IISはプリザンターのスクリプトによるカスタマイズの経験が豊富です。
プリザンター導入に際してカスタマイズをご検討されている方は是非ご相談ください!
またご不明点やご質問などございましたら弊社までお問い合わせください。