UIデザイン入門」の第22回です。過去の記事もご覧ください。今回はjQueryを使って、「問い合わせフォーム」にバリデーション(検証)機能を付ける方法を解説します。入力漏れや入力ミスがないか、サーバーへ送信する前に、クライアント側であらかじめ簡易的な検証を済ませることで、フォームのユーザビリティを高められます。今回のサンプルでは特に、入力漏れやミスのあった項目を分かりやすくユーザーに示すように工夫しています。「問い合わせフォーム」のサンプルとして、以下のようなWebページを作成します。バリデーション機能としては、必須項目の「お名前」「性別」「どこでこのサイトを知りましたか?」「お問い合わせ内容」が入力されているか、「郵便番号」が数値で入力されているか、「メールアドレス」がメールアドレスの書式になっているか、「メールアドレス」と「メールアドレス(確認)」に入力されたテキストが同じか――をチェックします。作成するHTMLフォームのサンプルHTML/XHTML(以下、HTML)は、フォーム全体を定義型リスト(dl/dt/dd要素)で記述し、dt要素に「お名前」などの項目名を、dd要素にinput要素などのフォーム部品を配置しています。各フォーム部品(input/textarea要素)にはバリデーションの条件を示す「validate」「required」「number」「mail」などのclass属性を付けています。今回のサンプルは汎用性を考え、class属性で適用するバリデーションルールを変更できるように設計します。それぞれのclass属性の意味は後ほど、スクリプトを作成する際に説明しますので、ここでは各フォーム要素にどのようなclass属性が付いているか確認してください。/></p></form>CSSは次のようになります。フォーム部品や項目名の基本スタイルを定義するとともに、バリデーションエラー(必須項目の入力漏れやメールアドレスの入力違いなどがあった場合)用のスタイルも記述しておきます。今回のバリデーションのスクリプトは、バリデーションエラー時にdd要素に「error」というclass属性を追加します。p.errorはエラーメッセージを表示するテキストのスタイルで、色を赤に、太字に設定します。labelは、エラーが発生したフォーム部品用のスタイルで、背景色をピンクに設定しています。チェックボックスやラジオボタンはlabel要素にも背景色を設定し、label要素の背景がチェックボックスやラジオボタンの背景にも敷かれるように、position:relative;とz-index、margin/paddingで調整して配置しています。6(IE6)やIE7では、チェックボックスやラジオボタンに対するbackgroundプロパティの挙動が他のブラウザーと異なり、意図どおりに表示されません。そこで、スターハックやスタープラスハック(関連記事)を使って、ブラウザーがIE6/IE7の場合のみlabel要素の背景を無効化しています。一覧へDESIGN実務で使えるjQueryプラグイン3選Web制作者のためのjQuery入門。最終回は、現場で使える便利なプラグインを3つ紹介。具体的な使い方もサンプル付きで解説する。DESIGN制作現場で役立つjQueryプラグインの使い方Web制作者のためのjQuery入門。今回と次回は、制作効率を上げる「jQueryプラグイン」の概要と使い方について解説する。DESIGNjQueryとAjaxで作るスムーズページングWebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。DESIGNjQuery+CSSによるカルーセルパネルの作り方Web制作に活用するjQuery入門。アマゾンでおなじみの「カルーセル」(Carrousel)作り方をチュートリアルで解説する。タイマーを使った改造法付き。DESIGNjQueryでバリデーション付きメールフォームを作ろうWeb制作者のためのjQuery入門。今回はバリデーション(検証)機能付きの問い合わせフォームの作り方をチュートリアルで解説する。DESIGNjQueryで自作するフローティングウィンドウドラッグ&ドロップで動かせるフローティングウィンドウをCSS+jQueryで作ってみよう。IE対策のポイントも解説。UIデザイン入門(目次)Webデザイナー、(X)HTML/CSSコーダー、マークアップエンジニアが扱いやすいJavaScriptライブラリー「jQuery」を基礎から解説。プログラムの基本的な書き方から、実務で使えるサンプルまで。jQueryをマスターして仕事の幅をぐっと広げよう。この冬作ろう!jQueryプラグイン講座2008年、最も勢いのあったJavaScript/Ajaxライブラリ「jQuery」。1日1本、簡単なプラグインの作成方法を解説する6日間の集中講座だ。00DESIGNjQueryで作るAmazon流リキッドレイアウトAmazonのようにウィンドウの幅に合わせてコンテンツの表示を変えるようにしたい――難しいリキッド・レイアウトで使えるテクニックにチャンレジしてみよう。00DESIGNjQueryで作る“Amazon風”インターフェイス国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間も時間もかけずに自分のWebサイトをブラッシュアップしていく方法を紹介する本連載。第4回はAmazon.co.jpの回転式スライドパネル(カルーセル)に挑戦しよう。00DESIGNあのFlashサイトのUIをjQueryで作る海外サイトをお手本に、ページの切り換えをJavaScriptで派手に演出する方法を紹介しよう。スライドする動きもjQeryを使えば手軽に作れる。00DESIGNjQueryアニメ&エフェクト合わせ技で画像を拡大jQueryを使ってWebサイトのブラッシュアップに挑戦。コンテンツの魅力を引き立てるシンプルなWebデザインに、ちょっとした華を添えるアニメーション/エフェクト処理を作ってみよう。00DESIGNjQueryでクールなくるくるウィジェットを作ろうjQueryでかっこよく使いやすいUIを作ろう。今回は、くるくる回るカルーセルをページをめくるナビゲーションに使う方法について。customSelect.jsフォームのセレクトメニューのデザインを簡単にカスタマイズできるプラグイン「customSelect.js」を紹介します。スマホお気に入り一覧マイページ。