0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-02-05

###参考
https://stackoverflow.com/questions/3671300/jquery-validation-groups

###追記しました

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が必要だということにたどり着くまでにかなりの時間を費やしました。

###ゴール

image.png

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

メッセージはデフォルトのままですが、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({
    // グループ化してエラーメッセージを1つにまとめる
    groups: {
      nameGroup : "fname lname"
    },
    rules: {
      fname:  { require_from_group : [1, ".name"] },
      lname:  { require_from_group : [1, ".name"] },
    },
    // メッセージをカスタマイズ
    messages: {
      fname: "少なくとも1つは入力してください",
      lname: "少なくとも1つは入力してください",

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




</body>
</html>


###表示結果

image.png

###おわりに

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

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

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?