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

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

Software(Tips)jQueryのValidationプラグインでエラーチェック

趣味で作っているサイトにも管理画面は用意しているのですが、自分用なので入力フォームにエラーチェックは入れていませんでした。今回、クライアント側で簡単にできるならということで、jQuery の Validation プラグインを使ってみました。

必須入力チェック、メールアドレスチェック、文字数チェックなど、基本エラーチェック項目は揃っていて、機能拡張も可能になっています。結局はバックエンドのサーバ側でもエラーチェックはするので、フロントエンドで凝り過ぎても仕方ないですけどね。

使い方は簡単。まずは必要なライブラリをダウンロードします。jQuery 本体は別途 jQuery のサイトからダウンロードして下さい。

jQuery
jQuery plugin: Validation

そして、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>

あとは、form タグに付けた id に合わせてエラーチェック対象のフォームを指定します。また、テキストボックスなどの input タグにエラー種別のクラスを指定します。これでチェックが実行されるようになります。詳しくは公式のマニュアルを参照して下さい。

<script type="text/javascript">
$(document).ready(function() {
    $("#saratoga").validate();
});
</script>

<form id="saratoga" method="post" action="/">
<input type="text" name="id" size="50" value="" class="required" />

(省略)

</form>

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

jQueryでフォームの入力チェックする、jquery.validate.js とエラーの日本語化

<script src="/js/messages_ja.js" type="text/javascript"></script>

最終更新日:

関連記事

人気記事

新着情報