jQuery(などの)プラグインを使ってフォームにバリデーションを楽々追加する

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。お久しぶりの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を使うタイプも配布されています。