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］
