少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思った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認証を実装できます。