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
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告