去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。

フォームサンプル

ソースお持ち帰り用 (Github)

主な機能

入力必須箇所の強調、および入力検証

入力されていない箇所に赤色の背景色をつけている

required属性が指定されている箇所について、入力必須の場所を背景色で強調します（⇒赤）。

入力がされたら背景色を変更します（⇒緑）。pattern属性が指定されている場合は、その正規表現に基づいて、入力内容を検証します。入力されていなければ赤色、入力されているが条件を満たさない場合は黄色、入力されていて条件も満たしている場合は緑色に背景色をそれぞれ変更します。

検証はメッセージを出すタイプのものも結構あるのですが（「(！)半角3-10文字で入力してください」とかいちいち警告する感じの）、入力中にゴチャゴチャメッセージが出てきてもうるさいので（そちらに注意が取られてしまう）、なるべく最小限のアウトプットで状態に気付けるように留意しました。

郵便番号 ⇛ 住所自動変換

住所が自動入力された様子

郵便番号7桁を入力すると、自動的に都道府県と地域名欄に合致するものを検索して挿入します（kawaさんが公開されているAjaxZip 2.0を利用）。フロントエンドで処理しているので、ローカル環境でも動作します。

なお、合致するものがない場合は注記を表示します。

漢字 ⇛ かな自動変換

姓が自動変換された様子

漢字氏名が入力されたらかなに変換して、自動的によみがな欄に挿入します（Social IME かな漢字変換APIを利用）

難読漢字だと変な値が入りそうなので、やるかどうか迷うところですが、大体のケースで大丈夫そうだったのでいれてます。

カナを漢字欄に入力されると変換されない問題があります（ひらがなの場合は対処しました）。キーコードを取る方式に変えたほうがいいかもしれないですね。

メールアドレスをでっかく表示して確認を促す

メールアドレスをでっかく表示した様子

メールアドレスは2回入力させるタイプのものがよくあるのですが、コピペされたら意味ないし、コピペできないようにするのはユーザの不満になりえます。なので、入力した値をリアルタイムででっかく表示して見ておいてねという感じにしました。

たまにメールアドレス欄の文字サイズが異常に小さくて、ドットとコンマが判別できなかったりするのですが、そういうところがエラー原因だったりするのではと思っています。

クレジットカード欄の入力フォーマットなど

クレジットカード欄の入力の様子

こういう処理をしてます（jQuery.paymentを利用）

日付入力はカレンダーから選択

カレンダーから日付を選択する様子

お届け日をカレンダーから選択するようにしています（jQuery UI: Datepickerを利用）。お届け日は2日後〜30日後から選べるようにしています

パスワードの入力一致チェック

パスワードの一致を確認している様子

パスワードはセキュリティ上、メールアドレスのようにでっかく表示するわけにもいかないので、2回入力させて、内容が一致した時に背景色を緑にしています。

利用させてもらったライブラリ

追記

このサイトのコメント欄、Githubに頂いたコメント、はてなブックマークのコメントを参照して問題を修正しました。

全ての問題は解消できていませんが、致命的な部分ですぐに直せるところは直しました。

いろんなフィードバックをいただけて助かります。こうやって数百人の目で見てもらえるの、ブログやってていいところですね。

smile書き手

このブログは、私（@hashcc）が日々考えていることをまとめて、つなげて、残しておくためのブログです。
関心領域は Webデザイン（特にUXデザインやUIデザイン関連）、食や観光に関する情報環境の整備、情報の可視化、アクセシビリティなどです。

書き手にご興味があれば自己紹介ページで詳細をご確認ください。

commentsコメント

しばらくお待ちください・・