jQuery Validation Pluginを使って入力フォームの入力・選択項目のバリデーションチェックを行います。未入力や入力内容がおかしい入力・選択項目にエラーメッセージを表示させる方法をご紹介します。
Webアプリケーションの入力フォームは、ユーザーがアプリにデータを送信するための重要な窓口です。しかし、ユーザーが誤った形式でデータを入力すると、システムに不具合が生じたり、正しい情報が届かなかったりする可能性があります。そのため、適切なバリデーション（入力チェック）を設けることが必要不可欠です。
本記事では、jQuery Validation Pluginを使用して、入力フォームにバリデーションを設定し、誤った入力があればエラーメッセージを表示する方法を詳しく解説します。
このプラグインを活用すれば、複雑なバリデーション設定を手軽に実装できます。特に、ユーザーがデータを入力しやすく、正しいデータ形式を確保するための方法について具体的な例を用いながら紹介します。
ステップ1：CSSファイルを読み込む
まず、フォームにスタイルを適用するためのCSSファイルを準備しましょう。ここでは、入力フィールドやエラーメッセージの表示方法を整えるために、screen.cssというスタイルシートを読み込みます。スタイルは自由に調整できるため、デザインに応じて適宜変更してください。
<link rel="stylesheet" href="./screen.css">
ステップ2：jQuery Validation Pluginの導入
次に、jQuery Validation Pluginを読み込み、バリデーションの基本設定を行います。以下のように、jquery-3.1.1.jsとjquery.validate.jsを読み込みましょう。このプラグインを使用することで、複雑なJavaScriptのコーディングを省略し、直感的な設定が可能です。
<script src="./jquery-3.1.1.js"></script>
<script src="./jquery.validate.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
$().ready(function() {
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "「姓」を入力してください",
lastname: "「名」を入力してください",
username: {
required: "「ユーザー名」を入力してください",
minlength: "「ユーザー名」は2文字以上で構成されている必要があります"
},
password: {
required: "「パスワード」を入力してください",
minlength: "「パスワード」は5文字以上である必要があります"
},
confirm_password: {
required: "「パスワード（再確認）」を入力してください",
minlength: "「パスワード（再確認）」は5文字以上である必要があります",
equalTo: "上記と同じ「パスワード」を入力してください"
},
email: "有効な「メールアドレス」を入力してください",
agree: "「ポリシー」に同意してください",
topic: "少なくとも2つのトピックを選択してください"
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if (firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
フォームのバリデーションを設定するために、$.validator.setDefaultsメソッドでデフォルトの動作を設定します。ここでは、送信ボタンを押すとalertが表示される簡易的なハンドラーを追加しています。
ステップ3：HTMLの入力フォームの構築
次に、実際の入力フォームを作成します。ここでは、一般的なフォーム要素として「姓」「名」「ユーザー名」「パスワード」「メールアドレス」などを使用しています。id="signupForm"と設定することで、このフォームに対して先ほどのバリデーションが適用されます。
<h1>jQuery Validation Pluginを使ったフォーム（Form）入力バリデーションチェックを行います</h1>
<div align="center">以下のフォームから入力・選択を行って「送信」ボタンをクリックすると、<br>未入力やフォーマットがおかしい項目にはエラーメッセージが表示されます。</div>
<div id="main">
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<p>
<label for="firstname">姓</label>
<input id="firstname" name="firstname" type="text">
</p>
<p>
<label for="lastname">名</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<label for="username">ユーザー名</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">パスワード</label>
<input id="password" name="password" type="password">
</p>
<p>
<label for="confirm_password">パスワード（再確認）</label>
<input id="confirm_password" name="confirm_password" type="password">
</p>
<p>
<label for="email">メールアドレス</label>
<input id="email" name="email" type="email">
</p>
<p>
<label for="agree">ポリシーに同意する</label>
<input type="checkbox" class="checkbox" id="agree" name="agree">
</p>
<p>
<label for="newsletter">ニュースレターを受取る</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
</p>
<fieldset id="newsletter_topics">
<legend>トピック（少なくとも2つ選択してください）-注：ニュースレターが選択されていない場合は非表示になりますが、デモではここに表示されます</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">マーケット
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">最新情報
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="digester" name="topic">メーリングリスト
</label>
<label for="topic" class="error">受け取りたいトピックを2つ以上選択してください。</label>
</fieldset>
<p>
<input class="submit" type="submit" value="送信">
</p>
</fieldset>
</form>
</div>
jQuery Validation Pluginを使った入力フォーム（Form）のバリデーションチェックデモページ
以下のデモページで実際の動作を確認してみてください。
jQuery Validation Pluginを使った入力フォーム（Form）のバリデーションチェックデモページ
ソース元：jQuery Validation Plugin
以下がソース元サイトです。
jQuery Validation Plugin | Form validation with jQuery
まとめ
今回は、jQuery Validation Pluginを使用して、入力フォームのバリデーションチェックを行う方法を紹介しました。このプラグインを使用することで、コーディング量を削減しつつ、使いやすく視覚的にもわかりやすいエラーメッセージを実装できるため、ユーザーにとっても利便性が向上します。さらにカスタマイズしたい場合は、エラーメッセージのデザインやバリデーションルールを変更し、独自の要件に合わせて調整することが可能です。
このようなフォームバリデーションは、フロントエンド開発において非常に役立つ技術です。特に初心者の方には、まずはこのプラグインを使ってバリデーションの基礎を身に付け、徐々に独自のJavaScriptによるバリデーションへとステップアップしていくことをお勧めします。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
