jQuery

jQuery Validation Plugin でグループで複数入力項目をValidation（検証）する方法

2022年10月30日 by single コメントはまだありません

jQuery Validation Plugin でグループで複数入力項目をValidation（検証）する方法

サンプル

連絡先（いずれかを入力してください）

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>jQuery Validation demo(6)</title>
   <!-- CDN jQuery https://releases.jquery.com/jquery/ -->
   <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="  crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
   <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/localization/messages_ja.js"></script>
  <style type="text/css">
  .error {
    border: 3px solid red;
  }
  /* 入力チェックNGの場合に適用されるスタイル */
  label.error {
    border: 3px solid orange;
    margin-left:3px
  }
  /* 入力チェックOKの場合に適用されるスタイル */
  .valid {
    border: 3px solid blue !important;
  }
  </style>
</head>
<body>
  <form id="myForm" method="get" action="#">
    <fieldset>
      <legend>連絡先（いずれかを入力してください）</legend>
      <p>
        <label for="mobile">携帯電話番号</label>
        <input id="mobile" class="phone-group" name="mobile" type="tel"  />
      </p>
      <p>
        <label for="telno">自宅電話番号</label>
        <input id="telno" class="phone-group" name="telno" type="tel"  />
      </p>
      <p>
      <p>
        <label for="email">E-mail</label>
        <input id="email" class="phone-group" name="email"  type="email" />
      </p>

      <input type="submit" value="送信" />
    </fieldset>

  </form>
  <script>
    /* Validation初期化 */
    $("#myForm").validate(
    {
      /* 入力項目定義 */
      rules: {
        mobile: 
        {
          require_from_group: [1, ".phone-group"]
        }
        ,
        telno: 
        {
          require_from_group: [1, ".phone-group"]
        }
        ,
        email: 
        {
          require_from_group: [1, ".phone-group"]
        }
        ,
      },
      /* メッセージ定義 */
      messages: {
        mobile: {
          require_from_group: "いずれかの連絡先を入力してください"
        }
        ,
        telno: {
          require_from_group: "いずれかの連絡先を入力してください"
        }
        ,
        email: {
          require_from_group: "いずれかの連絡先を入力してください"
        }
      },
    });
  </script>
</body>
</html>

デモ

導入方法

JSファイルインクルード

複数テキストボックスの入力をグループとしてチェックするには、アップロードファイルのチェックと同じように事前に「additional-methods.js」または「additional-methods.min.js」を追加で読み込んでおく必要があります。

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/localization/messages_ja.js"></script>

グループで複数入力項目をValidation（検証）するには？

グループで複数入力項目をValidation（検証）するには、メソッド『require_from_group』を利用してください。

３つの入力項目のうち、必ず一つを入力必須にする場合

まず、最初にテキストボックス３つを用意します。

  <form id="myForm" method="get" action="#">
    <fieldset>
      <legend>連絡先（いずれかを入力してください）</legend>
      <p>
        <label for="mobile">携帯電話番号</label>
        <input id="mobile" class="phone-group" name="mobile" type="tel"  />
      </p>
      <p>
        <label for="telno">自宅電話番号</label>
        <input id="telno" class="phone-group" name="telno" type="tel"  />
      </p>
      <p>
      <p>
        <label for="email">E-mail</label>
        <input id="email" class="phone-group" name="email" type="email" />
      </p>

      <input type="submit" value="送信" />
    </fieldset>
  </form>

次に、jQuery Validationを初期化し、オプションで『require_from_group』を指定します。

  <script>
    /* Validation初期化 */
    $("#myForm").validate(
    {
      /* 入力項目定義 */
      rules: {
        mobile: 
        {
          require_from_group: [1, ".phone-group"]
        }
        ,
        telno: 
        {
          require_from_group: [1, ".phone-group"]
        }
        ,
        email: 
        {
          require_from_group: [1, ".phone-group"]
        }
        ,
      },
      /* メッセージ定義 */
      messages: {
        mobile: {
          require_from_group: "いずれかの連絡先を入力してください"
        }
        ,
        telno: {
          require_from_group: "いずれかの連絡先を入力してください"
        }
        ,
        email: {
          require_from_group: "いずれかの連絡先を入力してください"
        }
      },
    });
  </script>

『require_from_group』を指定する際に配列で値を指定します。

最初に、入力必須とする項目数を指定します。複数の入力項目のうち一つを必須とする場合には「1」を指定します。

二つ目にグループ化したいオブジェクトのセレクタを指定してください。

ご参考

関連ページ