[JS]フォームのエラー判定を行い、アドバイスを表示するスクリプト -Ketchup
Post on:2010年2月19日
sponsors
カスタマイズ性に優れた、フォームのエラー箇所にツールチップをふわりとアニメーションで表示するスクリプトを紹介します。
Ketchupは既存のフォームにも簡単に導入が可能で、マークアップの変更やツールチップのデザイン変更も簡単に行えます。
また、エラー判定も多彩な項目で設定が可能です。
- 入力の有無
- 最大・最小文字数
- 最大・最小数値
- メールアドレスのチェック
- urlのチェック
- 日付のチェック
- ユーザーネーム（a-z0-9_-）のチェック
- など
これらの判定は組み合わせて使用することも可能です。
設置方法は、スクリプトとスタイルシートを外部ファイルとして記述し、各フィールドに下記のように追加します。
HTML（変更前）
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <input type="text" id="ex1_username" /> </textarea> |
HTML（変更後）
入力の有無とユーザーネームの妥当性をチェック
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <input type="text" id="ex1_username" class="validate(required, username)" /> </textarea> |
sponsors
