ユーザの入力ストレスを軽減するライブラリまとめ

フォーム入力は必要とは言え、ユーザにとってストレスの大きい仕組みです。特にスマートフォンやタブレットで多くの入力項目を埋めるのは苦労が伴うでしょう。それだけにサーバに送って入力エラーがあると、ユーザは修正するのが嫌になってしまうかも知れません。

そこで使ってみたいのが今回紹介するクライアントサイドでの入力チェックライブラリです。リアルタイムに入力チェックを行ったり、そのメンテナンスを簡単にしてくれるライブラリが多数あります。

json-editor

JSONスキーマからフォームを生成します。JSONスキーマでは入力タイプであったり、入力できる文字列長なども指定できます。それらの設定に基づいて自動的にフォームを生成し、入力チェックも行ってくれます。

jdorn/json-editor: JSON Schema Based Editor

Winterfell

独自のJSONフォーマットからフォームを生成し、入力チェックも行うReact用のライブラリになります。独自のJSON記法を覚える必要がありますが、ステップ踏んで進むようなフォームも生成できるようです。

andrewhathaway/Winterfell: Generate complex, validated and extendable JSON-based forms in React.

formAnimation

バリデーションでエラーがあった際にフォーム全体を揺らすライブラリです。バリデーション自体はjQuery Validateを使っています。

nnluukhtn/formAnimation: Form Animation: when form validation <3 animate.css

tlx-editor

入力チェックを兼ね備えたWebコンポーネントライブラリです。一行テキスト、テキストエリア、ラジオ、チェックボックス、セレクト、スターレーティングなど幅広く対応しています。

anywhichway/tlx-editor: A single HTML component supporting all input types, select, textarea, radio groups, and star ratings.

Hyperform

HTML5のバリデーションAPIの完全実装を目指して作られているライブラリです。IE9についても利用できるようになっています。将来的にHTML5のバリデーションが標準化された後もそのまま使い続けられそうです。

hyperform/hyperform: Capture form validation back from the browser

jq-idealforms

基本的なバリデーションに加えて日付ピッカーやステップ、Ajaxによるサーバ側とのデータ検証など幅広い入力チェックに対応しています。ブラウザもIE9以降で利用できます。

elclanrs/jq-idealforms: The ultimate framework for building and validating responsive HTML5 forms.

jquery.formance

入力フォーマット（クレジットカードや電話番号など）を指定することで、入力チェックと必要に応じてハイフン（-）などを自動入力してくれます。

omarshammas/jquery.formance: A jQuery library for formatting and validating form fields, based on Stripe’s jQuery.payment library.

Creditly

クレジットカード番号の入力チェックに特化したライブラリです。カード会社を判別して、それによってセキュリティコードの桁数を変えたり、チェックデジットの検証も行います。

wangjohn/creditly: An intuitive credit card form

---

入力チェックはサーバ側でも行う必要があるため、クライアントに特化しすぎているとサーバ側でのエラーチェックと差異が発生したり、メンテナンスが煩雑になります。JSONスキーマのような設定ファイルを使うことで、サーバとクライアント両方で共通したバリデーションが可能になるでしょう。