jQuery Validation Pluginを使って入力フォームの入力・選択項目のバリデーションチェックを行います。未入力や入力内容がおかしい入力・選択項目にエラーメッセージを表示させる方法をご紹介します。
Contents
ディスプレイ広告
入力フォームのCSSファイルを読み込む
※入力フォームのスタイルを記述したscreen.cssファイルを読み込みます。必要に応じて変更して下さい。
<link rel="stylesheet" href="./screen.css">
jQuery Validation Pluginを使ってバリデーションチェックを行う入力フォームのJavaScriptの記述
※jquery-3.1.1.jsとjquery.validate.jsファイルを読み込みます。ページ読込後$(“フォームエリア”).validate({入力チェックルール,エラーメッセージ})を設定します。
<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>
バリデーションチェックを行う入力フォームの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
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告
ディスプレイ広告