kokoe blog

技術メモブログ

JQueryライブラリ紹介:フォームの入力チェック-jQuery Validate Plugin

Movable Typeのメールフォームプラグインを利用した際、入力ページから確認ページに遷移するときにチェックが入らなかったもので、Javascriptで対応することにしました。

で、調べていたのですが、よいJQueryプラグインがあったので紹介。

jQuery Validate Plugin


私が説明するまでも。。。とっても親切に解説をしてくださっているサイトさんがあったのでご紹介します。そちらをみてくださいね。

参考サイト
http://d.hatena.ne.jp/kudakurage/20091211/1260521031

こちらもいいな、すごい
http://5509.me/log/exvalidation

追記。

フォームの検証が有効な場合と無効な場合で、CSSを処理しなければいけない作業がでたので、ちょっとソースコードをめもっておきます。
$(document).ready(function(){$("#formName").validate({rules: {mail_author:       "required",mail_author_kana:  "required",mail_tel: {required: false,telnum: true},mail_privacy:   "required"},messages: {mail_author:       "※お名前を入力してください",mail_author_kana : "※お名前(フリガナ)を入力してください",mail_tel:  {telnum:    "半角英数字で正しい形式で電話番号を入力してください"},mail_privacy:     "※個人情報保護方針に同意してください"}});// ▼フォームチェックが通らなかったときの処理$("#submit_button").click(function() {if($("#formName").validate().form()==false){$(".container").css("top",0);}});});
form()というメソッドを使うのがコツみたい。
フォームを検証して、チェックが通ったらtrueを返して、そじゃないときはfalseを返すっぽい。

参考にしたサイト
http://micelle.org/trash/jquery-validation-plugin
http://docs.jquery.com/Plugins/Validation