ユーザ体験向上に役立つフォームのバリデーションスクリプトいろいろ

エラーを減らし、より快適にフォームの入力を行ってもらうのは、コンバージョンを持つウェブサイトにとっての必須課題。

根本的にはインターフェース設計やエラー画面の設計、あるいはフォーム前の意欲醸成が大事なのですが、最近ではバリデーション絡みのJavaScriptのライブラリがかなり整理されてきました。

あんまりこのブログでスクリプト紹介とかはやらないのですが、たまたま丁度dzineblogで紹介があったので、備忘録的に。

JQueryを使ったスクリプト

■ A jQuery inline form validation

画像無しで利用できるスクリプトです。
※CSS3を使っているので、ブラウザによっては角丸などのイフェクトの見え方が違ってしまうのがもったいないです。

■ Valid8 - An input field validation plugin for Jquery

デモページをちょいと使ってみましたが、感触的にはかなりGood。
軽快で、フィードバックの返し方も良い感じですね。

■ jQuery for Designers - Ajax Form Validation Example

Valid8よりももうちょっとシンプルなインターフェースです。
デフォルトではテキストしかメッセージが出てこないのでカスタマイズが必要かな。

自由度は高そうなので、個人的には嬉しい。

■ jQuery Validation Plugin

これも同様のバリデーションスクリプト。
サブミットボタンを押したときにエラーを判定するタイプなど、複数のオプションが用意されているので企業に入れやすい感じがします。
挙動もサクサクしていますね。

■ Form Validation using jQuery

これもシンプルなjQueryのプラグイン。
ためしに作ってみたところ、解説がかなり分かりやすいので、ささっと実装できました。

その他のライブラリー

■ Easy Form Validation Requires No Javascript Library

単体のスクリプトがいいという人におすすめ。
チェックのフィードバックも最初から分かりやすく作りこまれているので、ほぼそのまま利用できます。

■ Really Easy Field validation with Prototype

こちらはPrototype.jpを使ったものです。
非常に洗練された挙動で心地よいですね。おすすめです。

エラーメッセージが結構きつく出るので、そのあたりはカスタマイズしたいかも。

■ Mootools Form Validation +

Mootoolsを使ったバリデーションスクリプトです。意外とMootoolsは少ないですね。
A jQuery inline form validationと似たような印象。

フォームに限りませんが、やはりjQueryが一通りできると非常に表現の幅が広がりますね。
ちょいと勉強してみますか。。

jQueryで作る Ajaxアプリケーション

posted with amazlet at 09.11.19

沖林 正紀
技術評論社
売り上げランキング: 24012

おすすめ度の平均:

よくまとまっているおもいます。
分かり易い入門書
シンプルな構成と読みやすさ。
最初の一歩
初心者に優しくない

Amazon.co.jp で詳細を見る