Webフォームにおける入力検証の仕組みは大事です。一度サーバに送信してからエラーを返す方式はユーザのストレスも大きくお勧めしません。サーバ側での入力チェックは必要ですが、ユーザビリティのためにWebブラウザ側でも入力チェックをしましょう。 今回はそんな入力チェックを提供するJavaScriptライブラリ、Hyperformを紹介します。

Hyperformの使い方

利用例です。エラーメッセージをテキストボックスの下に表示します。

パスワードのように二つの入力欄に応じたケースもサポートしています。

チェックボックスが有効な場合だけ入力チェックが行われます。

URLやメールアドレス、時間などのフォーマットに合わせた入力チェックもできます。

エラーメッセージはフォームの上に出すこともできます。

メッセージはカスタマイズできます。

Hyperformを使えば複雑な条件のフォーム入力チェックも簡単に実現できるでしょう。ユーザビリティを向上し、成果の高いフォームを作成しましょう。

HyperformはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Hyperform - Capture form validation back from the browser hyperform/hyperform: Capture form validation back from the browser