カート内、新規登録、お問い合わせ等のフォーム部分のエラー表示方法

2011-12-06 10:21
カート内、新規登録、お問い合わせ等のフォーム部分のエラー表示方法
下記のように、お客様情報の入力で「メールアドレス」の入力がない場合、エラーが表示されます。

エラー表示方法
フォーム上部 ご入力内容に不備がございます。下記項目を再度ご入力ください。
が赤枠内に表示されます。
フォームエラー項目 赤枠で表示
エラー項目部分のみが、赤枠で囲んで表示されます。
※IE9、Firefox、Safariでは、角丸で表示されますが、IE7、IE8については、CSS3に対応していないため、角丸では表示されません。
入力完了項目 色を薄く表示
入力完了しエラーではない項目は、色が薄くなります。

エラー項目を入力すると、下記のように赤枠は非表示となります。

内容の変更
入力完了項目は、色が薄く表示されますが、内容の変更は可能です。
カーソルを入力欄に合わせると、「お名前」欄のように通常の色に変更されます。
商品詳細ページのエラー表示
下記のように、商品詳細ページのオーダーメイド選択で「オーダーセレクトボックス(※必須の場合)」の入力がない場合、エラーが表示されます。
※バリエーションも同様に選択していない場合、エラーが表示されます。

エラー表示方法
フォーム上部 ご入力内容に不備がございます。下記項目を再度ご入力ください。
が表示されます。
フォームエラー項目 赤枠で表示
エラー項目部分のみが、赤枠で囲んで表示されます。
※IE9、Firefox、Safariでは、角丸で表示されますが、IE7、IE8については、CSS3に対応していないため、角丸では表示されません。
入力完了項目 色を薄く表示
入力完了しエラーではない項目は、色が薄くなります。

エラー項目を入力すると、下記のように赤枠は非表示となります。

内容の変更
入力完了項目は、色が薄く表示されますが、内容の変更は可能です。
内容を変更すると、「オーダーラジオボタン」欄のように通常の色に変更されます。
スマートフォン版のエラー表示
スマートフォン版も同様のエラー表示方法となります。