jQuery Validation Pluginを使って入力フォームのバリデーションチェックを行う方法｜DAD UNION

jQuery Validation Pluginを使って入力フォームの入力・選択項目のバリデーションチェックを行います。未入力や入力内容がおかしい入力・選択項目にエラーメッセージを表示させる方法をご紹介します。

Contents

入力フォームのCSSファイルを読み込む
jQuery Validation Pluginを使ってバリデーションチェックを行う入力フォームのJavaScriptの記述
バリデーションチェックを行う入力フォームのHTMLの記述
jQuery Validation Pluginを使った入力フォーム（Form）のバリデーションチェックデモページ
ソース元：jQuery Validation Plugin

入力フォームの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>