フォームの入力内容をリアルタイムにチェックするサンプル

「jQuery-Validation-Engine」を使って、フォームの入力内容をその都度自動チェックし、ミスがあればバルーンで警告を表示します。
入力項目がフォーカスを失った際と、「チェック＆送信」ボタンがクリックされた際に、各入力内容のチェックが行われます。

※各入力欄を何も触らずに、とりあえず末尾の「送信」ボタンを押してみて下さい。一括してチェックが行われます。
※エラーメッセージのバルーンは、バルーン自体をクリックすると消えます。

テキスト入力欄

【基本】

◎必須項目：
(必須)

【文字数の指定・制限】

◎最低6文字入力：
(必須)
(オプション)

◎最大12文字入力：
(必須)
(オプション)

◎5～10文字の範囲で入力：
(必須)
(オプション)

【文字種の制限】

◎英数字のみを入力（0～9、A～Z、a～zのみ）：

◎英字と空白のみを入力：

◎数字のみを入力（空白文字も可）：

【数値の制限】

◎数字のみを入力：

◎整数のみを入力：

◎「-5」以上の数値を入力：
(必須)

◎「30」以下の数値を入力：
(必須)

【入力内容のチェック】

◎URLを入力（http:// https:// ftp://で始まる）：

◎メール：

◎IPアドレスを入力（IPv4のみ）：

◎電話番号を入力：

【同値のチェック】

◎パスワード（同値）を入力：
入力：
確認： (上記と同じ内容を入力)

【日付のチェック・制限】

◎日付を入力（スラッシュまたはハイフン区切り）：

◎日付（2010年より過去）を入力：

◎日付（今日より未来）を入力：

【選択個数の指定・制限】

◎最低3つ選択：
林檎蜜柑葡萄西瓜

◎最大2つまで選択：
リンゴみかんぶどう

◎1つの選択が必須：
アップルオレンジグレープ

【選択とテキスト入力欄の関連付け】

◎「その他」欄を選択した場合だけ、テキスト入力欄への入力が必須（チェックボックス）：
果物
野菜
その他：

◎「その他」欄を選択した場合だけ、テキスト入力欄への入力が必須（ラジオボタン）：
フルーツ
ベジタブル
その他：

【プルダウンメニュー】

◎先頭の「デフォルト項目」以外の項目の選択が必須：

【セレクトボックス】

◎先頭の「デフォルト項目」以外の項目の選択が必須：

※このサンプルページに関する解説は、上記の記事本文をご参照下さい。