【jQuery】Validation プラグインで「少なくとも１つは入力」のチェックがしたい

15437 ワード
HTML JavaScript jQuery Validation Java Java テキストリンク

参考

追記しました

validation
debug : true,
// これがあると送信ボタンを押しても送信先に遷移しない!

CDNたち

// jQuery 本体
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
// Validation プラグイン
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
// Validationのオプションメソッドを有効にするためのライブラリ
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

特に最後のadditional-methods.min.jsが必要だということにたどり着くまでにかなりの時間を費やしました。

ゴール

送信ボタンをおしたらこんな感じになります。

メッセージはデフォルトのままですが、rulesの後に設定すれば変更できます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery Validation Group</title>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
    <style>
    .invalid {
      border: 2px solid red;
    }
  </style>
</head>
<body>

  <form id="group-validation" action="" method="">

    <p>
      姓<input type="text" name="fname" id="fname" class="name">
    </p>
    <p>
      名<input type="text" name="lname" id="lname" class="name">
    </p>

    <button type="submit">送信</button>
  </form>


  <script>
  jQuery.validator.setDefaults({
    debug: true, // これがあるとsubmitをblockしてしまう！
    highlight : function( element ){
      $(element).addClass('invalid');
    },
    unhighlight : function( element ){
      $(element).removeClass('invalid');
    }
  });

  // 肝心なのはここから
  $("#group-validation").validate({
    rules: {
// ここでadditional-methodsのrequire_from_groupを利用
      fname :  { require_from_group : [2, ".name"] },
      lname :  { require_from_group : [2, ".name"] },
    }
  });
  </script>

</body>
</html>

require_from_group


適応したいname名: { require_from_group : [最低何個か, "グループ化したいinputに付与した共通のclass名" }

わかりにくい・・・


rules : {
  ○ : { require_from_group : [ △, □ ] }
}

// ○ → 適用したいinputのname名
// △→ 最低何個入力させたいか（数値）
// □ → グループ化したいinputに付与した共通のclass名 例）".hoge"

エラーメッセージを一つにまとめる

下記を追加してグループ化する


groups : {
 nameGroup : "fname lname"
}

これはあくまでメッセージを一つにまとめるための記述。

rulesとmessagesは個別に設定する必要がある。

rulesとmessagesとerrorPlacementを追加したコード


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery Validation Group</title>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
    <style>
    .invalid {
      border: 2px solid red;
    }
  </style>
</head>
<body>

  <form id="group-validation" action="" method="">

    <p>
      姓<input type="text" name="fname" id="fname" class="name">
    </p>
    <p>
      名<input type="text" name="lname" id="lname" class="name">
    </p>

    <button type="submit">送信</button>
  </form>


  <script>
  jQuery.validator.setDefaults({
    debug: true,
    highlight : function( element ){
      $(element).addClass('invalid');
    },
    unhighlight : function( element ){
      $(element).removeClass('invalid');
    }
  });


  $("#group-validation").validate({
    // グループ化してエラーメッセージを１つにまとめる
    groups: {
      nameGroup : "fname lname"
    },
    rules: {
      fname:  { require_from_group : [1, ".name"] },
      lname:  { require_from_group : [1, ".name"] },
    },
    // メッセージをカスタマイズ
    messages: {
      fname: "少なくとも１つは入力してください",
      lname: "少なくとも１つは入力してください",

    },
    // エラーメッセージを表示する位置をカスタマイズ
    errorPlacement: function(error, element){
      element.parent().before(error);
    }


  });
  </script>




</body>
</html>

表示結果

おわりに

たぶん自分で関数を定義して、true,falseの判定をすればadditional-methodsを利用することもないと思いますが、私の様な未熟者にはまだまだプラグインを更に自分に会うように寄せていくスキルはありませぬ。

しかし少しずつjqueryやプラグインの理解もできてきたと思います！！

「グループ化して入力チェックしたいなぁ」という方は参考になるかと思います。