(2007/08/06 s.fujikawa)
本サンプルは、Web標準の日々で発表した「Spry Widgetでつくる入力フォーム」というプレゼンテーションに連動したものです。
必ず、Web標準の日々での資料公開「Spry Widgetでつくる入力フォーム」にアップされている資料をご覧の上ご利用ください。

Adobe Spry Framework 1.5をベースにしています。


まずは試しにEnterキー、またはsubmitボタンでsubmitしてみてください。

お名前 姓: 文字が長すぎます。 名: 文字が長すぎます。
  姓と名をあわせて全角25文字以内で入力してください。 名前入力は必須です
 

追加したチェック内容(nameCheckオブジェクト参照):
1.姓と名をあわせて25文字を超えたらエラーを表示する。
2.姓と名の両方が空白ならsubmit時に名前入力が必須であるエラーを表示しています。
(これらのエラーを表示するために、spryNameというspanを追加しています)

都道府県 他の項目を選択してください。 選択してください。
メールアドレス
正しいメールアドレスを入力してください。 半角100文字以内で入力してください。 メールアドレスは必ず入力してください

(確認入力)
メールアドレスが変更されますが、確認入力が一致しません。
 

追加したチェック内容(mailCheckオブジェクト参照):
確認入力が一致しなかったらエラー
新たなエラーを表示するために、textfieldValidationのCSSに、このエラー表示をするためのセレクタを追加しています。
(textfiledValidation.cssの中にある、textfieldReinputMsg、textfieldReinputStateセレクタ)

また、メールアドレスチェックの内容を緩めにして、携帯のメールアドレスが問題なく入力できるようにしています。(textfiledValidation.js参照)

性別 選択してください。
生年月日 選択してください。 選択された日付は無効です。
 

追加したチェック内容(birthCheckオブジェクト参照):
選択したデータが、日付として存在しない日付だったらエラー
(複数のセレクトボックスの組み合わせのエラーをチェックして、 SpryWidgetの組み込みエラースタイルであるselectInvalidStateをJavaScriptからコントロールしています。)

規約に同意   同意する 項目を選択してください。
その他   最大文字数を超えています。 最小文字数に達していません。
 

変更内容(includeしているtextareaValidation.js参照):
入力文字数は1文字以上50文字以内で制御されます。
最大文字数に達したときにWindows IEで、日本語IMEを入力していったときに制限文字数制御で、フォームの内容が全部消えてしまったりブラウザが落ちることを回避しています。