馬とテニスのIT革命
馬とテニスとリラックマが好きな IT 系のエンジニアです。
JavaScript

jQueryのValidationプラグインでエラーチェック

趣味で作っているサイトにも管理画面は用意しているのですが、自分用なので入力フォームにエラーチェックは入れていませんでした。

今回、クライアント側で簡単にできるならということで、jQuery の Validation プラグインを使ってみました。

jQuery のバリデーションについては「jQueryValidationEngine」も使用してみましたので興味があったらご覧ください。

あわせて読みたい
jQueryValidationEngineで項目に表示するエラーを1つに限定するフロントエンドの技術の発展はめまぐるしいですが、何だかんだで JQuery を使う機会はまだまだ多いです。 今回は、jQueryV...

Validationプラグインの特徴

必須入力チェック、メールアドレスチェック、文字数チェックなど、基本エラーチェック項目は揃っていて機能拡張も可能になっています。

結局はバックエンドのサーバ側でもエラーチェックはするので、フロントエンドで凝り過ぎても仕方ないですけどね。

使い方は簡単。

まずは必要なライブラリをダウンロードします。

jQuery 本体は別途 jQuery のサイトからダウンロードして下さい。

そして、html でダウンロードした JavaScript(js)を読み込みます。

<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 タグにエラー種別のクラスを指定します。

これでチェックが実行されるようになります。

詳しくは公式のマニュアルを参照して下さい。

<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>

エラー表示を日本語化したい場合は、別途日本語用のスクリプトが提供されているので、ダウンロードして追加で読み込んで下さい。

<script src="/js/messages_ja.js" type="text/javascript"></script>
Web API The Good Parts

オライリーの「Web API」に特化した本です。最近の多くの Web サービスは API が活用されていますが、その技術はこれまでの Web サイトとそれほど大きく変わりません。

今後、マイクロサービス化が進む中で知っておいて損はない内容が詰め込まれており、現場のエンジニアやこれから Web 系のエンジニアを目指す人にもオススメの一冊です。

created by Rinker
¥2,376
(2018/10/15 13:40:38時点 Amazon調べ-詳細)