jQuery-Validation-Engineのサンプル画面

jQuery-Validation-Engineのサンプル画面です。何も入力せず送信ボタンを押すと、確認画面には行かずに名前の入力欄にポップアップでエラー表示をします。またそのエラー箇所まで自動でスクロールします。他の項目は指定の文字や文字数で入力しないとエラー表示を出し、表示されたエラー表示はクリックすると消すことができます。詳しい設置方法については【jQuery】たった9行!フォーム入力をリアルタイムでチェックする方法をご参照ください。

サンプル画面

class="validate[required]"を記述。このクラスを記述することによって必須入力項目になります。

class="validate[custom[email]]"を記述。正しいメールアドレス形式で入力されているかチェックします。requiredの記述がないため必須項目ではありません。必須項目にするには"validate[required,custom[email]]"と記述。以下の各項目も同様にrequiredを追加すると必須入力項目になります。

class="validate[custom[phone]]"を記述。正しい電話番号形式で入力されているかチェックします。

class="validate[custom[url]]"を記述。正しいURL形式で入力されているかチェックします。

一つ目の入力欄にclass="validate[required]"id="password"を記述。二つ目の入力欄にclass="validate[required,equals[password]]"を記述。一つ目の入力欄に与えたID名を二つ目の入力欄で指定することによって同じ値が入力されているかチェックします。主にメールアドレスやパスワードのチェックで使用します。

class="validate[maxSize[10]]"を記述。[10]のカッコ内の数字が最大文字数になり、文字数をオーバーするとエラー表示を出します。

class="validate[minSize[10]]"を記述。[10]のカッコ内の数字が最低文字数になり、文字数を下回るとエラー表示を出します。

class="validate[custom[onlyLetterNumber]]"を記述。英数字のみの入力が可能で、それ以外の文字を入力した場合にエラー表示を出します。

class="validate[custom[number]]"を記述。数字のみの入力が可能で、それ以外の文字を入力した場合にエラー表示を出します。

チェック項目その1
チェック項目その2
チェック項目その3
チェック項目その4

class="validate[minCheckbox[2]]"を記述。[2]のカッコ内の数字が最低チェック数になります。

チェック項目その1
チェック項目その2
チェック項目その3
チェック項目その4

class="validate[maxCheckbox[2]]"を記述。[2]のカッコ内の数字が最大チェック数になります。

チェック項目その1
チェック項目その2
チェック項目その3

class="validate[required]]"を記述。このクラスを記述することによって必須選択項目になります。