jQuery(などの)プラグインを使ってフォームにバリデーションを楽々追加する
どうもこんばんは。お久しぶりのDaikuharaです。
今回はフォーム関連シリーズ記事として、バリデーション用のjQueryプラグインをまとめておきます。8つほどあります。
フォームの使いやすさやデザイン性を向上させる33の方法
これまで何回かに分けてWEBフォーム関連の記事を書いてきましたがフォームの使いやすさやデザイン性を向上させる33の方法としてまとめました。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。興味がございましたらぜひ。
28. バリデーション用jQueryプラグインまとめ
validate.js
送信クリック時にバリデートを実行します。エラー項目をまとめて表示するタイプ。
Tasty Form Validation
リアルタイムでバリデートを実行します。
デフォルトのエラー表示にかわいらしい吹き出しのスタイルが用意されているので、ポップなデザインにしたいときはおすすめです。input直後に挿入する形にも変更可能です。IE8以降対応
jQuery Validation Engine
リアルタイムバリデーション。デモがたくさん用意されています。
jQuery Live Form Validation
こちらもリアルタイムバリデーション。送信クリック後のエラー表示がフォーカス時に非表示になってくれるが個人的に気持ち良くて気に入っています。
exValidation
こちらは日本製のプラグインなので、英語が苦手な私のような人にも理解しやすくおすすめです。カナ必須なども可能なのも嬉しい。
リアルタイムでチェックしてくれて、エラー表示はツールチップ形式とテキスト挿入形式が用意されています。
Ideal Forms
HTML5を使ったクリーンなデザインのフォーム。エラー表示もきれいです。IE8以上をサポート。
日付のセレクト部分にはjQuery UIが使われています。
Valid8
とてもシンプルな機能のバリデーション。必須項目チェック、メール入力チェック、パスワード確認と同意チェックができます。
ログインフォームなどに。
live validation
単独で動作するプラグインです。サイトでjQueryを使用しないときなど、軽量になって良さそうです。prototype.jsを使うタイプも配布されています。