趣味で作っているサイトにも管理画面は用意しているのですが、自分用なので入力フォームにエラーチェックは入れていませんでした。
今回、クライアント側で簡単にできるならということで、jQuery の Validation プラグインを使ってみました。
jQuery のバリデーションについては「jQueryValidationEngineで項目に表示するエラーを1つに限定する」で jQueryValidationEngine も使用してみましたので興味があったらご覧ください。
jQueryValidationEngineで項目に表示するエラーを1つに限定するフロントエンドの技術の発展はめまぐるしいですが、何だかんだで JQuery を使う機会はまだまだ多いです。
今回は、jQueryVal...
Validationプラグインの特徴
必須入力チェック、メールアドレスチェック、文字数チェックなど、基本エラーチェック項目は揃っていて機能拡張も可能になっています。
結局はバックエンドのサーバ側でもエラーチェックはするので、フロントエンドで凝り過ぎても仕方ないですけどね。
使い方は簡単。
まずは必要なライブラリをダウンロードします。
jQuery 本体は別途 jQuery のサイトからダウンロードして下さい。
そして、html でダウンロードした JavaScript(js)を読み込みます。
1 2 3 | <script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="/js/jquery.validate.min.js" type="text/javascript"></script> <script src="/js/additional-methods.js" type="text/javascript"></script> |
Validationプラグインの使い方
あとは、form タグに付けた id に合わせてエラーチェック対象のフォームを指定します。
また、テキストボックスなどの input タグにエラー種別のクラスを指定します。
これでチェックが実行されるようになります。
詳しくは公式のマニュアルを参照して下さい。
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript"> $(document).ready(function() { $("#rilakkuma").validate(); }); </script> <form id="rilakkuma" method="post" action="/"> <input type="text" name="id" size="50" value="" class="required" /> (省略) </form> |
エラー表示を日本語化したい場合は、別途日本語用のスクリプトが提供されているので、ダウンロードして追加で読み込んで下さい。
1 | <script src="/js/messages_ja.js" type="text/javascript"></script> |
