htmlチェックボックスのバリデーターチェックについて

jQueryのvalidata.jsを使って、チェックボックスのバリデーターチェックをしようかと考えております。CSS3を使って、デザイン性のあるチェックボックスを作ろうとすると、validata.jsが上手く機能しないみたいなのです。
除外すると、うまく機能するみたいですが…何か良い手があれば教えて頂ければと存じます。お忙しい中、恐縮ですが宜しくお願い致します。

HTML・javascript
1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>jQueryの実験</title>
6    <link href="style.css" rel="stylesheet" type="text/css">
7    <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
8    <link href="sytle.css" rel="stylesheet" type="text/css">
9    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
10    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
11    <script type="text/javascript" src="jquery.validate.min.js"></script>
12    <script type="text/javascript">
13        $(document).ready(function(){
14            $("#form").validate({
15                rules:{
16                    'japan[]': {required: true}
17                },
18                messages :{
19                    'japan[]':{required: "どれか一つは選んでくださいm(_ _)m"}
20                },
21                errorPlacement :function(error,element){
22                    if (element.attr("name") == "japan[]" ){
23                        error.insertAfter("#error");
24                    } else { 
25                 error.insertAfter(element);
26                }
27                }
28            });
29        });
30 </script>
31  </head>
32  <body>
33   <form action ="" method="get" id="form">
34   <p id="prefer">好きな都道府県は</p>
35   <div id="error"></div>
36   <div class="chkId"> 
37	      <p class="font">神奈川県</p>
38	        <label>
39	        <input type="checkbox" name="japan[]" value="1" class="required">
40	        <span class="image"></span></label>
41   </div>
42   <div class="chkId"> 
43	      <p class="font">東京都</p>
44	        <label>
45	        <input type="checkbox" name="japan[]" value="2" class="required">
46	       <span class="image"></span></label>
47   </div>
48   <div class="chkId"> 
49	      <p class="font">千葉県</p>
50	        <label>
51	        <input type="checkbox" name="japan[]" value="3" class="required">
52		    <span class="image"></span></label>
53	        
54	        
55   </div>
56   <div class="chkId"> 
57	      <p class="font">埼玉県</p>
58	         <label>
59	        <input type="checkbox" name="japan[]" value="4" class="required">
60	        <span class="image"></span></label>
61   </div>
62   <div class="chkId"> 
63	      <p class="font">群馬県</p>
64	        <label>
65	        <input type="checkbox" name="japan[]" value="5" class="required">
66	       <span class="image"></span></label>
67	    
68   </div>
69   <input type="submit" value="送信する" id="send" class="send" name="send" style="width:100px; height:30px;">
70   </form>
71  </body>
72</html>

css3
1@charset "utf-8";
2/* 
3html5doctor.com Reset Stylesheet
4v1.6.1
5Last Updated: 2010-09-17
6Author: Richard Clark - http://richclarkdesign.com 
7Twitter: @rich_clark
8*/
9
10html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
11	margin: 0;
12	padding: 0;
13	border: 0;
14	outline: 0;
15	font-size: 100%;
16	vertical-align: baseline;
17	background: transparent;
18}
19body {
20	line-height: 1.1em;
21}
22article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
23	display: block;
24}
25nav ul {
26	list-style: none;
27}
28blockquote, q {
29	quotes: none;
30}
31blockquote:before, blockquote:after, q:before, q:after {
32	content: '';
33	content: none;
34}
35a {
36	margin: 0;
37	padding: 0;
38	font-size: 100%;
39	vertical-align: baseline;
40	background: transparent;
41	text-decoration: none;
42}
43  change colours to suit your needs ins {
44background-color:#ff9;
45color:#000;
46text-decoration:none;
47}
48 change colours to suit your needs mark {
49background-color:#ff9;
50color:#000;
51font-style:italic;
52font-weight:bold;
53}
54del {
55	text-decoration: line-through;
56}
57abbr[title], dfn[title] {
58	border-bottom: 1px dotted;
59	cursor: help;
60}
61table {
62	border-collapse: collapse;
63	border-spacing: 0;
64}
65/* change border colour to suit your needs 
66*/
67hr {
68	display: block;
69	height: 1px;
70	border: 0;
71	border-top: 1px solid #cccccc;
72	margin: 1em 0;
73	padding: 0;
74}
75input, select {
76	vertical-align: middle;
77}
78/* --------------------------- reset ここまで ---------------------------- */
79
80section, aiticle, div, header, footer, nav {
81	display: block;
82}
83body {
84	font-size: 100%;
85	color: black;
86	font-weight: normal;
87	font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
88	vertical-align: baseline;
89	background: white;
90}
91
92#prefer{
93	margin-top: 20px;
94	margin-bottom: 50px;
95	text-align: center;
96}
97
98.chkId{
99	width: 600px;
100	height: 100px;
101	margin-left: auto;
102	margin-right: auto;
103	border:1px solid #CCC;padding:10px;border-radius:10px;
104}
105
106.font {
107	display: block;
108    font-size: 18px;
109	width:145px;
110	height:20px;
111    margin-top: 43px;
112	margin-left: 20px;
113	float:left;
114}
115
116
117label{ 
118	position: relative;
119	margin-left: 220px;
120	width:130px;
121	height:60px;
122}
123label input{ 
124	display: none;
125}
126label .image{ 
127	position: absolute;
128	left: 0;
129	top:1.2em;
130	display: block;
131	background: url(buttonOff.png) no-repeat 0 0;
132	width: 130px;
133	height: 60px;
134}
135label input:checked + .image{
136	background:url(buttonOn.png) no-repeat 0 0;
137	
138}
139
140#send{
141	margin: 50px;
142	margin-left: 650px;
143}
144

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

回答2件

ベストアンサー

以下のようにしてはいかがでしょうか？

HTML
1<!doctype html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>jQueryの実験</title>
6    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
7    <style type="text/css">
8        /*
9        html5doctor.com Reset Stylesheet
10        v1.6.1
11        Last Updated: 2010-09-17
12        Author: Richard Clark - http://richclarkdesign.com
13        Twitter: @rich_clark
14        */
15
16        html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
17            margin: 0;
18            padding: 0;
19            border: 0;
20            outline: 0;
21            font-size: 100%;
22            vertical-align: baseline;
23            background: transparent;
24        }
25
26        body {
27            line-height: 1.1em;
28        }
29
30        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
31            display: block;
32        }
33
34        nav ul {
35            list-style: none;
36        }
37
38        blockquote, q {
39            quotes: none;
40        }
41
42        blockquote:before, blockquote:after, q:before, q:after {
43            content: '';
44            content: none;
45        }
46
47        a {
48            margin: 0;
49            padding: 0;
50            font-size: 100%;
51            vertical-align: baseline;
52            background: transparent;
53            text-decoration: none;
54        }
55
56        change colours to suit your needs ins {
57            background-color: #ff9;
58            color: #000;
59            text-decoration: none;
60        }
61
62        change colours to suit your needs mark {
63            background-color: #ff9;
64            color: #000;
65            font-style: italic;
66            font-weight: bold;
67        }
68
69        del {
70            text-decoration: line-through;
71        }
72
73        abbr[title], dfn[title] {
74            border-bottom: 1px dotted;
75            cursor: help;
76        }
77
78        table {
79            border-collapse: collapse;
80            border-spacing: 0;
81        }
82
83        /* change border colour to suit your needs
84        */
85        hr {
86            display: block;
87            height: 1px;
88            border: 0;
89            border-top: 1px solid #cccccc;
90            margin: 1em 0;
91            padding: 0;
92        }
93
94        input, select {
95            vertical-align: middle;
96        }
97
98        /* --------------------------- reset ここまで ---------------------------- */
99
100        section, aiticle, div, header, footer, nav {
101            display: block;
102        }
103
104        body {
105            font-size: 100%;
106            color: black;
107            font-weight: normal;
108            font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
109            vertical-align: baseline;
110            background: white;
111        }
112
113        #prefer {
114            margin-top: 20px;
115            margin-bottom: 50px;
116            text-align: center;
117        }
118
119        .chkId {
120            width: 600px;
121            height: 100px;
122            margin-left: auto;
123            margin-right: auto;
124            border: 1px solid #CCC;
125            padding: 10px;
126            border-radius: 10px;
127        }
128
129        .font {
130            display: block;
131            font-size: 18px;
132            width: 145px;
133            height: 20px;
134            margin-top: 43px;
135            margin-left: 20px;
136            float: left;
137        }
138
139        label {
140            position: relative;
141            margin-left: 220px;
142            width: 130px;
143            height: 60px;
144        }
145
146        label input {
147            visibility: hidden; /* 変更。 */
148        }
149
150        label .image {
151            position: absolute;
152            left: 0;
153            top: 1.2em;
154            display: block;
155            background: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=buttonOff.png) no-repeat 0 0;
156            width: 130px;
157            height: 60px;
158        }
159
160        label input:checked + .image {
161            background: url(https://placehold.jp/fa2020/ffffff/150x150.png?text=buttonOn.png) no-repeat 0 0;
162        }
163
164        #send {
165            margin: 50px;
166            margin-left: 650px;
167        }
168    </style>
169</head>
170<body>
171<form action="" method="get" id="form">
172    <p id="prefer">好きな都道府県は</p>
173    <div id="error"></div>
174    <div class="chkId">
175        <p class="font">神奈川県</p>
176        <label>
177            <input type="checkbox" name="japan[]" value="1" class="required">
178            <span class="image"></span></label>
179    </div>
180    <div class="chkId">
181        <p class="font">東京都</p>
182        <label>
183            <input type="checkbox" name="japan[]" value="2" class="required">
184            <span class="image"></span></label>
185    </div>
186    <div class="chkId">
187        <p class="font">千葉県</p>
188        <label>
189            <input type="checkbox" name="japan[]" value="3" class="required">
190            <span class="image"></span></label>
191
192
193    </div>
194    <div class="chkId">
195        <p class="font">埼玉県</p>
196        <label>
197            <input type="checkbox" name="japan[]" value="4" class="required">
198            <span class="image"></span></label>
199    </div>
200    <div class="chkId">
201        <p class="font">群馬県</p>
202        <label>
203            <input type="checkbox" name="japan[]" value="5" class="required">
204            <span class="image"></span></label>
205
206    </div>
207    <input type="submit" value="送信する" id="send" class="send" name="send" style="width:100px; height:30px;">
208</form>
209<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
210<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
211<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
212<script>
213    $(document).ready(function () {
214        $("#form").validate({
215            rules: {
216                'japan[]': {required: true}
217            },
218            messages: {
219                'japan[]': {required: "どれか一つは選んでくださいm(_ _)m"}
220            },
221            errorPlacement: function (error, element) {
222                if (element.attr("name") == "japan[]") {
223                    error.insertAfter("#error");
224                } else {
225                    error.insertAfter(element);
226                }
227            }
228        });
229    });
230</script>
231</body>
232</html>

参考

投稿2017/05/02 16:09

s8_chu

総合スコア14731

YamamotoAtsushi

2017/05/02 22:49

迅速な回答ありがとうございます。 visibility:hiddenという手があったのですね。早速試してみます^o^

YamamotoAtsushi

2017/05/03 03:30

有難うございました。コードまで解説して頂きおかげさまでできました

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

input要素が display: none; の状態だから取得できないのではないでしょうか。

CSS
1label{ 
2    position: relative;
3    margin-left: 220px;
4    width:130px;
5    height:60px;
6    overflow: hidden; /* ADD */
7}
8label input{ 
9    /*display: none;*/
10    position: absolute; /* ADD */
11    left: -100%; /* ADD */
12    top: -100%; /* ADD */
13}