jQueryで簡単！フォームをリアルタイムで入力チェック(3ページ目)

jQuery-Validation-Engineを使って入力チェックする対象を指定

さて、前ページで必要なファイルを読み込めたら、次に入力チェックの対象とするフォームを指定します。

■チェック対象のフォームIDを指定
以下のような5行のソースを、jQuery-Validation-Engineの構成ファイルを読み込み終えた後に記述します。その際、入力チェック対象にしたいフォームに付加したid名を指定しておきます。

<script type="text/javascript">
jQuery(document).ready(function(){
   jQuery("#formID").validationEngine();
});
</script>

上記の3行目にある太字「formID」の部分は、実際の入力フォームのid名に合わせて修正して下さい。ここで指定したid名が割り振られたフォームだけが、入力チェックの対象になります。

例えば、form要素を以下のように記述しているなら、

<form id="messageform" method="get" action="send.cgi">

先の3行目には、以下のようにid名を記述します。

jQuery("#messageform").validationEngine();

前ページで記述した「構成ファイルを読み込むための4行」と、上記で記述した「チェック対象を指定するための5行」の、合計9行を書いたら入力チェックの準備は完了です。

具体的な入力チェック条件の指定方法は次のページからご紹介いたしますが、その前にjQuery-Validation-Engineを使って入力チェックする記述方法の基礎を簡単に解説しておきます。
 

jQuery-Validation-Engineを使って入力チェックする記述方法の基礎

jQuery-Validation-Engineでは、input要素のclass属性値にチェック内容の指示を書き込むことで入力チェックを実施します。例えば、以下のような感じです。

<input type="…" name="…" id="…" value="…"
 class="validate[入力チェック指示]">

上記の「validate」の文字列は固定で、必ず記述します。それに続く「入力チェック指示」の部分に、これ以後で解説する書き方で条件を記述することで入力チェックができます。とても手軽です。自力でスクリプトを記述したり、スクリプトのソースを修正する必要はありません。

まずは、入力必須項目を指定する方法と、チェック条件を加える方法を以下でご紹介いたします。これらがjQuery-Validation-Engineを使って入力チェックする記述方法の基礎です。

■入力必須チェック：

<input type="text" name="req" id="req" value=""
 class="validate[required]">

class属性値に validate[required] と記述しておくと、その項目は「入力必須項目」として解釈されます。その結果、この項目に何も入力されていない場合には、図のように必須である旨のエラーメッセージが表示されます。

※図の上側は、日本語版を使った場合の表示。下側は、英語版を使った場合の表示。

■入力必須チェック＋条件指定：

<input type="text" name="email" id="email" value=""
 class="validate[required,custom[email]]">

class属性値内の「required」に続いて、カンマ記号で区切ってチェック条件を追記できます。上記の場合は「custom[email]」と入力していますので、入力内容がメールアドレスかどうかの判定を行います。入力が必須なので、空欄のままだと図のように2つのエラーメッセージが表示されます。

■入力任意(＝必須ではない)＋条件指定：

<input type="text" name="email" id="email" value=""
 class="validate[optional,custom[email]]">

class属性値内に、「required」ではなく「optional」と記述した場合は、その入力欄は「任意入力」として解釈されます。入力は必須ではないため、空欄の場合には何もエラーメッセージは表示されません。何かが入力されている場合のみ、条件判定(上記の場合はメールアドレスかどうかの判定)が行われます。

このように、class属性を使って入力チェックの指示を記述します。

それでは、次のページで様々なチェック条件の記述方法をご紹介いたします。