フォーム入力に役立つjQueryプラグイン

jQuery UI／プラグインの活用（3）

入力項目を検証するValidation

　続いて、入力項目を検証するValidationプラグインです。プラグインのダウンロード先はこちらです。

　Validationプラグインは、例えば入力文字数やEmail、URLなどの入力形式、および必須項目かどうかの検証を行うことができます。リスト4では、Validationプラグインの使用例として、氏名（必須項目、2文字以上）、URL（任意入力、URL形式）、Email（必須項目、Email形式）の入力項目を用意したサンプルフォームを示します。

リスト4 Validationプラグインの使用例（jQueryPlugin_validation.html）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>validation-form-and-hintsサンプル</title>
//1. jQueryの読み込み
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
//2. validateプラグインの読み込み
<script type="text/javascript" src="js/jquery.validate.js"></script>

<script type="text/javascript">
<!--
    $(function () {
        $("#testForm").validate();//3. Validationプラグインの実行
        });
//-->
</script>
</head>
    <body>
        <h1 id="title">validationサンプル</h1>
         <form id="testForm" name="commentForm" method="post" action="">
           <fieldset>
             <p>
	　　 //4. 検証項目を指定
             <label for="cname">氏名（2文字以上）</label>
             <input id="name" name="name" class="required" minlength="2" />
             </p>
             <p>
	     <label for="curl">URL</label>
	     <input id="curl" name="url" class="url"/>
	     </p>
             <p>
             <label for="cemail">E-Mail</label>
             <input id="email" name="email" class="required email" />
	     </p>
	     <p>
	     <input class="submit" type="submit" value="登録"/>
	     </p>		
	    </fieldset>
        </form>
    </body>
</html>

　jQueryとプラグインの読み込みは1と2で行います。3ではFormタグのid（testForm）を指定し、プラグインを実行しています。4の検証項目の指定では、各入力項目のclassにrequiredを指定することで、必須項目を、urlを指定するとurl形式で、emailを指定するとemail形式で入力時の検証が行われます。必須項目と組み合わせたい場合は、例えば「required email」のように記述します。

　url形式とは「http（またはhttps）://+任意の文字列+ドット（.）+から始まる文字列+任意の文字列」です。また、email形式は、「任意の文字列+アットマーク（@）+任意の文字列+ドット（.）+任意の文字列」です。

 

　文字列内の許可されている文字など詳細は、jquery.validate.jsを参照してください。リスト4の実行結果（検証前）を図4に、検証エラー時の結果を図5に示します。

図4 Validationの実行結果（検証前）

図5 Validationの実行結果（検証時：エラー）

　入力項目を正しく入力すると、エラーメッセージが消えます（図6）。

図6 Validationの実行結果（検証時：正常）