入力項目を検証する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の実行結果（検証時：正常）
