jquery validate chackboxがエラー表示がおかしい

checkboxのバリデーションでcheckboxがチェックされてない時に全checkboxが赤でバリデーションされた表示されるようにしたいのですが現状最初のcheckboxだけが赤でバリデーションされた表示になっています。どこで間違えていますか？
誰か教えてくださいませ！！
現状は下記のようの最初のcheckboxだけが赤くなっていますが、全部のcheckboxを赤くなるようにしたいです。

下記はjqueryのソースコードです.補足：00xxxxxhhhhは他のシステムと連携するための使用しています。

<form action="" method="POST" id="contact_form" data-validate >
<div>
<table >
<tbody>
<tr class="radio">
<th><i>必須</i>radioチェック</th>

<td>
<span><label><input type="radio"  id="00N0K00000xxxx" name="00N0K00000xxxx" class="inquiry">
<span>radio-1</span></label></span>

<span><label><input type="radio"  id="00N0K00000xxxx" name="00N0K00000xxxx" class="inquiry">
<span>radio-2</span></label></span>
<span><label><input type="radio"  id="00N0K00000xxxx" name="00N0K00000xxxx" class="inquiry">
<span>radio-3</span></label></span>

<div id="radioinfo_error"></div>
</td>
</tr>
<tr class="checkbox">
<th><i>必須</i><span>てすとチェック欄</span></th>
<td >
<span><label>
<input type="checkbox" name="00xxxxxhhhh" id="00xxxxxhhhh" class="interesting"><span>test_1</span></label></span>
<span><label>
<input type="checkbox" name="00xxxxxhhhh" id="00xxxxxhhhh" class="interesting"><span>test_2</span></label></span>
<span><label>
<input type="checkbox" name="00xxxxxhhhh" id="00xxxxxhhhh" class="interesting"><span>test_3</span></label></span>
<span><label>
<input type="checkbox" name="00xxxxxhhhh" id="00xxxxxhhhh" class="interesting"><span>test_4</span></label></span>
<span><label>
<input type="checkbox" name="00xxxxxhhhh" id="00xxxxxhhhh" class="interesting"><span>test_5</span></label></span>
<span><label>
<input type="checkbox" name="00xxxxxhhhh" id="00xxxxxhhhh" class="interesting"><span>test_6</span></label></span>
<div id="checkboxservice_error"></div>
</td>
</tr>
</tbody>
</table >
</div>
</form>
<script>
    jQuery(function($){
    $("#contact_form").validate({
          rules : {

                 "00xxxxxhhhh": {
                     required: true
                 },
                 "00N0K00000xxxx": {
                     required: true
                 },

          },
          messages: {
                 "00N0K00000xxxx" :{
                        required: "必須項目です。"
                 },
                 "00xxxxxhhhh" :{
                        required: "必須項目です。"
                 },
          },
          errorPlacement: function(error, element) {
                        if(element.attr("name")=="00N0K00000xxxx")
                        {
                            error.insertAfter("#radioinfo_error"); 
                        }
                        else if(element.attr("name")=="00xxxxxhhhh") 
                        {
                            error.insertAfter("#checkboxservice_error"); 
                        }

                        else{
                            error.insertAfter(element); 
                        }
              
          }
    });
});

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js
"></script>

yasutomi

2019/05/08 07:53

エラー表示以前にid="contact_form"やjQueryの読み込みなどが記述されていないコード自体がおかしいので修正が必要です。

yasutomi

2019/05/08 07:55

idやname属性がすべて00xxxxxhhhhになっているのもおかしいので修正が必要です。

退会済みユーザー

2019/05/09 02:08 編集

@yasutomi 指摘ありがとうございます。 id="contact_form"は追加しました。 dやname属性がすべて00xxxxxhhhhになっているのは他のシステムと連携するために使っていますので属性は正しいです。

x_x

2019/05/09 05:32

同じidの値が何度も出現しているということでしょうか？

yasutomi

2019/05/09 09:38

idは同じ文書内で1ヵ所にだけ使用できて重複させてはならないので属性の使い方は間違っています。

退会済みユーザー

2019/05/10 01:35

それぞれのidの値を違う値にしても同じエラーが出ます。

yasutomi

2019/05/10 01:57

#contact_formなのにid="contact-form"になっていたり jQueryがコード上で読み込まれていなかったり不備が多いので全体をよく確認してからコードの投稿をお願いします。

退会済みユーザー

2019/05/10 02:21

#contact_formは書き込みのミスでした。

退会済みユーザー

2019/05/10 02:28

checkboxの前にradioチェックありますがradioの方が全部正しくエラー表示されています。

行動規範の内容に同意します

回答1件

addMethod()で好きな検証メソッドを追加できるので試してみては？

jQuery
1  jQuery.validator.addMethod('allrequired', function(value, element) {
2    var nocheck = $(element.form.elements[element.name]).each(function(index, element) {
3      $(element).toggleClass('error', !element.checked);
4    }).filter(':not(:checked)');
5    if (nocheck.length) {
6      return false;
7    }
8
9    return true;
10  }, 'すべて必須です');