少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思ったjQueryプラグインのまとめです。
バリデーションや各フォームエレメントのデザイン変更といったオーソドックスなものから、上手く使えばユーザビリティの向上に繋がりそうなもの、他ではあまり見ないユニークな動きを実装できるものまで様々なタイプがあります。
中にはCSS3を併用したりそのままでは日本語に対応していないというものも幾つかあるので、使う際にはブラウザやデバイス環境によっていろいろ確認する必要はあるんですが、いずれも便利なプラグインばかりです。
- exValidation
プラグイン作者が日本の方なので、ひらがなやカタカナといった日本語のチェックもできるバリデーションプラグイン。 - Validetta
シンプルで軽量なバリデーションプラグイン。 - jQuery Valideasy
見た目がシンプルなバリデーションプラグイン。 - jQuery Validation Engine
吹き出しタイプでエラー表示するバリデーションプラグイン。 - Parsley.js
見た目がシンプルなバリデーションプラグイン。 - Formance.js
クレジットカード・メールアドレス・電話番号・時間など様々なフォーマット指定ができ、入力した際の内容を自動補完をしてくれます。 - formatter.js
同じく入力パターンを組み込めるプラグインで、クレジットカードと電話番号入力をフォーマットに沿った場合でしか入力できないようにしてくれます。 - jQuery Mask Plugin
同じくフォーマット設定が特徴のプラグイン。 - jQuery Complexify
現在入力されたパスワードがどれくらいの強度なのかを表示してくれます。 - jQuery Show Password Plugin
通常パスワードは何が入力されているか見た目ではわかりませんが、「show」ボタンを押すと入力した内容を見れるようにできます。 - jQuery EasyDropDown
select
要素の見栄えや機能をカスタマイズ・拡張するプラグイン。 - Minimalect
ミニマルな見栄えのselect
を実装できます。 - jQuery Selectbox plugin
同じくselect
要素の見栄えや機能をカスタマイズ・拡張するプラグイン。 - jQuery Selectric
同じくselect
要素の見栄えや機能をカスタマイズ・拡張するプラグイン。 - FancySelect
同じくselect
要素の見栄えや機能をカスタマイズ・拡張するプラグイン。 - Select2
同じくselect
要素の見栄えや機能をカスタマイズ・拡張するプラグイン。 - Chosen
select
要素にインスタンス検索(入力中に結果を表示してくれる検索)を実装できます。
便利で一応日本語でも使えるんですが、注意点としてブラウザによって大きく崩れたり動かない場合もあります。 - jQuery multiselect
select
要素のoption
複数選択を簡単にできるようにしてくれます。 - Multiple Select
同じくoption
複数選択を簡単にできるようにしてくれます。 - Image Picker
select
要素のoption
を選ぶと設定した画像が選択されたり、逆に画像をクリックするとoption
が選択されるといった連動ができるプラグイン。 - selectize.js
select
要素をタグ表示のように見せることができます。 - iCheck
チェックボックスとラジオボタンのデザインを変更でき、ミニマル・フラット・ポラリスなど6種類のデザインがスキンが用意されています。 - ui.elements
フォームの各種要素の見栄えをスタイリングするプラグイン。 - jQuery prettyCheckable
チェックボックスやラジオボタンの見栄えをスタイリングするプラグイン。 - Uniform
フォームの各種要素の見栄えをスタイリングするプラグイン。 - iOS Checkboxes
iOS風のチェックボックスを実装できるプラグイン。 - iPhone Style Radio and Checkbox Switches
同じくiOS風のチェックボックスを実装できるプラグイン。 - iToggle for jQuery
同じくiOS風のチェックボックスを実装できるプラグイン。 - Label Better
正確にはプレースホルダーではないですが、プレースホルダーに設定してある文言をフォーカス時にラベル代わりに表示させるような感じのもので、動きが可愛らしいのが特徴です :) - FloatLabel.js
同じくプレースホルダーがフォーカス時にラベル代わりになるようなものを実装します。 - Multi-Step Signup Form With CSS3 and jQuery
CSS3とjQueryを使って次ステップに行く際やエラーを表示する際にアニメーションを付加でき、フォームの進捗状況を表すプログレスバーも表示されています。 - Gravity Registration Form with Jquery
未入力時は入力欄はひとつしかないですが、項目を入力する毎に入力欄が次々とアニメーション表示されます。 - jQuery-FormHelp
この項目は何をどのように入力するかといったようなヘルプをツールチップで表示させることができます。 - In-Field Labels jQuery Plugin
フォーカスされた要素に設定してあるプレースホルダーを少し薄くするプラグイン。 - ah-placeholder.js
プレースホルダーを非対応ブラウザにも対応させることができます。 - Progression.js
フォームの進捗度をツールチップとプログレスで表示してくれます。 - jQuery Fullscreen Editor
右上に表示されるボタンをクリックするとtextarea
が大きく表示され、文字入力や編集などを行いやすく・見やすくすることができます。 - jQueryTextCount
jQueryを使ってTwitterのように入力した文字数をリアルタイムで表示する方法で、カウントダウンやカウントがマイナスの値になった際に背景色を変更する方法も一緒に紹介されています。 - jQuery Autosize
入力されたテキスト量に応じて、自動でtextarea
をリサイズしてくれます。 - jQuery.textcomplete
textarea
にオートコンプリート機能を実装できます。 - AutoJS
同じくtextarea
にオートコンプリート機能を実装できます。 - fancyInput
日本語未対応なので使用する機会は少ないと思いますが、文字入力にアニメーションを付加できます。 - Dropzone.js
ドラッグアンドドロップでファイルをアップロードできるようにします。 - jQuery File Upload
ファイルアップロード機能を拡張するプラグイン。 - slideControl.js jQuery Plugin
スライドコントロールを実装できるプラグインで、色はCSSで設定されているので自分好みの色に変更するのも簡単です。 - pickadate.js
モバイルやレスポンシブにも対応した日付・時間ピッカーを実装できます。 - Timepicker Plugin for jQuery
シンプルで軽量なタイムピッカープラグイン。 - Sisyphus.js
入力されたデータを自動保存してくれます。 - Smart Input Field Position Indicator
カーソル位置が明示されて、入力内容の大体の長さも可視化できるプラグイン。 - MotionCAPTCHA
一般的にスパム防止などの理由で設置されるCaptcha認証はパッと見で読みにく文字をテキスト入力するというものだと思いますが、これは表示された形に沿ってなぞるという少し変わったCaptcha認証を実装できます。