CVRアップにこれが効く!フォーム検証jQueryプラグイン10本をサンプルで徹底比較

2016/08/25

Julian Motz

17

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA CorporationJapanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

エラーメッセージや、入力サポートメッセージの表示は、ユーザーにメリットがあるだけではなく、フォームでの離脱を防ぎます。jQueryで簡単に実装、カスタマイズできるプラグインを中心にサンプルコード付きでまとめました。

HTML5では新しいform属性が導入され、ブラウザーがフォームのバリデーションを直接実行できるようになりました。基本的なフォームバリデーションは、この記事に書かれているようなプラグインを使わなくても、CSS3とJavaScriptで実現できます。とはいえ、HTML5を使ったフォームバリデーションには次のような制限があります。

  • エラーメッセージについてはブラウザーに任されており、自分で設定できるのは入力フィールドのタイトルのみ。
  • エラーメッセージのスタイルはカスタマイズできない。
  • 入力フィールドのパターンは自分で作成しなければならない。

次の10個のjQueryフォームバリデーションプラグインを使えば、エラーメッセージのカスタマイズやスタイリングだけでなく、バリデーションルールも簡単に作成できます。

1. Parsley

Parsleyは、ローカライゼーション、カスタムバリデーションルールなどの通常のオプションだけでなく、リモートAjaxバリデーションも供給する拡張可能なプラグインです。ドキュメントが簡潔で分かりやすく、プロジェクトも積極的にメンテナンスされています。バリデーションルールはHTML5のform属性、またはカスタムデータ属性を使ってコントロールされます。

Webサイトはこちらです。

ソースコードはこちらです。

2. jQuery Form Validator

モジュール式のプラグインjQuery Form Validatorは、デフォルトでバリデーションルールの基本セットを提供し、ユーザーは必要に応じてさらにモジュールをロードできます。たとえば、ファイルアップロード時のファイルバリデータだけでなく、日付け・セキュリティ・位置モジュールなどもあります。入力サジェスト機能も提供しています。バリデーションは、HTML5のデータ属性でコントロールされます。

Webサイトはこちらです。

ソースコードはこちらです。

3. jQuery Validation Plugin

2006年にリリースされたjQuery Validation Pluginは、初期のバリデーションプラグインの1つです。HTML5の属性、またはJavaScriptオブジェクトを使ってカスタムバリデーションルールを指定できます。このプラグインはデフォルトで多くのルールを搭載し、ユーザーが簡単にルールを作成できるAPIも提供しています。当初、jQuery Validation Pluginの詳細情報は入手困難で、プラグインの対応がjQuery 1.xに限定されていましたが、改善が確約されています。詳細は、こちらのキャンペーン情報を参照してください。

Webサイトはこちらです。

ソースコードはこちらです。

4. Bootstrap Validator

Bootstrap Validatorは、Bootstrap用のjQueryバリデーションプラグインです。基本的には、HTML5の属性を使用するネイティブのフォームバリデーションのラッパーですが、カスタムルールも追加できます。エラーメッセージはブラウザーから表示されますが、自動的に適切な言語に翻訳されます。

Webサイトはこちらです。

ソースコードはこちらです。

5. Smoke

SmokeはBootstrap用のコンポーネントのコレクションで、フォームバリデータも搭載されています。4.のBootstrap validatorとは対照的に、ブラウザーから直接バリデーションを使用しません。従って、エラーメッセージは自動的にローカライズされず、バリデーションルールはHTML5やデータ属性、JavaScriptを使って指定する必要があります。

Webサイトはこちらです。

ソースコードはこちらです。

6. FormValidation

FormValidationは、50ドルからの有料jQueryバリデーションプラグインで、Bootstrap、Foundationなどに組み込んで使えます。豊富なバリデーションルールとオプションを搭載しており、複雑なフォームを多く含むアプリケーションでは、FormValidationを使うことでメリットが得られる場合があります。

Webサイトはこちらです。

7. Validatr

Validatrは、ブラウザーによって実行され、ネイティブのエラーメッセージを最大限活用するフォームバリデーションの基本的なラッパーで、HTML5のform属性によってコントロールされます。このプラグインはポリフィル(polyfill)として、エラーメッセージスタイリングのカスタマイズに使用できます。それ以上でもそれ以下でもありません。

Webサイトはこちらです。

ソースコードはこちらです。

8. Validetta

Validettaは、データ属性を使用するバリデーションとわずかなオプションを提供しています。基本のバリデーションルール以外はカスタム正規表現で追加できますが、実際の追加例は示されていません。ほかのプラグインにはない唯一の機能は、エラーメッセージが吹き出しの形で表示されることです(以下のデモを確認してください)。

Webサイトはこちらです。

ソースコードはこちらです。

9. jQuery.validity

jQuery.validityは、HTML5やデータ属性ではなく、JavaScriptによってのみバリデーションをコントロールするプラグインです。このプラグインは動的なバリデーションルールにおいて役立つ場合もありますが、コードを効率よく書くための必要なオプションは提供していません。emailなどHTML5の新しいタイプ属性さえも使用できず、サクセスメッセージの表示に必要な、フォームが有効であるかどうかをチェックする機能も備えていません。

Webサイトはこちらです。

ソースコードはこちらです。

10. h5Validate

h5Validateは、気の毒なことに作成者(Eric Elliott)に見捨てられました。そのため、デモとドキュメントのWebサイトは、404(「ページが見つかりません」のエラーメッセージ)を返し、また未解決の課題が20個以上あります。このプラグインでは、タイプに従って入力が自動的に検証されず、次の例ではエラーメッセージさえ表示されません。h5Validateをこのリストに含めたのは、Ericがプロジェクトの新しい管理者を探しているからです。将来どこかの時点で、このプラグインが息を吹き返す可能性もあります。

ソースコードはこちらです。

最後に

ポピュラーなjQueryフォームバリデーションプラグインのトップ10を紹介しました。ぜひ使ってみてください。

(原文:10 jQuery Form Validation Plugins

[翻訳:新岡祐佳子]
[編集:Livit

Copyright © 2016, Julian Motz All Rights Reserved.

Julian Motz

Julian Motz

Julianはソフトウェア開発者・メディアデザイナーで、現在はドイツのベルリン在住。Web・ハイブリッドアプリケーションに力を入れており、オープンソース開発の愛好者である。

Loading...