質問編集履歴

1

コードを見やすくしました。

2019/10/07 02:55

投稿

defg
defg

スコア11

test CHANGED
File without changes
test CHANGED
@@ -16,6 +16,8 @@
16
16
 
17
17
  ####HTML
18
18
 
19
+ ```ここに言語を入力
20
+
19
21
  <!doctype html>
20
22
 
21
23
  <html>
@@ -28,143 +30,145 @@
28
30
 
29
31
  </head>
30
32
 
31
-
32
-
33
33
  <body>
34
34
 
35
35
  <form>
36
36
 
37
- <table>
38
-
39
-
40
-
41
- <tr>
42
-
43
- <th rowspan="6" scope="row">ご住所</th>
44
-
45
- <th>郵便番号 (半角数字)<span class="indis zip">必須</span></th>
46
-
47
- <td>〒<input type="text" id="zip1" name="zip1" id="zip1" class="validate[required,custom[number]]"> - <input type="text" id="zip2" name="zip2" id="zip2" class="validate[required,custom[number]]">
48
-
49
- <input type="button" id="btn" name="btn" value="郵便番号から検索"></td>
50
-
51
- </tr>
52
-
53
- <tr>
54
-
55
- <th>都道府県<span class="indis pref">必須</span></th>
56
-
57
- <td><select id="pref" name="pref" class="validate[required]">
58
-
59
- <option value="">お選び下さい▼</option>
60
-
61
- <option value="北海道">北海道</option>
62
-
63
- <option value="青森県">青森県</option>
64
-
65
- <option value="岩手県">岩手県</option>
66
-
67
- <option value="宮城県">宮城県</option>
68
-
69
- <option value="秋田県">秋田県</option>
70
-
71
- <option value="山形県">山形県</option>
72
-
73
- <option value="福島県">福島県</option>
74
-
75
- <option value="茨城県">茨城県</option>
76
-
77
- <option value="栃木県">栃木県</option>
78
-
79
- <option value="群馬県">群馬県</option>
80
-
81
- <option value="埼玉県">埼玉県</option>
82
-
83
- <option value="千葉県">千葉県</option>
84
-
85
- <option value="東京都">東京都</option>
86
-
87
- <option value="神奈川県">神奈川県</option>
88
-
89
- <option value="新潟県">新潟県</option>
90
-
91
- <option value="富山県">富山県</option>
92
-
93
- <option value="石川県">石川県</option>
94
-
95
- <option value="福井県">福井県</option>
96
-
97
- <option value="山梨県">山梨県</option>
98
-
99
- <option value="長野県">長野県</option>
100
-
101
- <option value="岐阜県">岐阜県</option>
102
-
103
- <option value="静岡県">静岡県</option>
104
-
105
- <option value="愛知県">愛知県</option>
106
-
107
- <option value="三重県">三重県</option>
108
-
109
- <option value="滋賀県">滋賀県</option>
110
-
111
- <option value="京都府">京都府</option>
112
-
113
- <option value="大阪府">大阪府</option>
114
-
115
- <option value="兵庫県">兵庫県</option>
116
-
117
- <option value="奈良県">奈良県</option>
118
-
119
- <option value="和歌山県">和歌山県</option>
120
-
121
- <option value="鳥取県">鳥取県</option>
122
-
123
- <option value="島根県">島根県</option>
124
-
125
- <option value="岡山県">岡山県</option>
126
-
127
- <option value="島県">島県</option>
128
-
129
- <option value="山県">山県</option>
130
-
131
- <option value="島県">島県</option>
132
-
133
- <option value="香川県">香川県</option>
134
-
135
- <option value="愛媛県">愛媛県</option>
136
-
137
- <option value="高知県">高知県</option>
138
-
139
- <option value="福岡県">福岡県</option>
140
-
141
- <option value="佐賀県">佐賀県</option>
142
-
143
- <option value="長崎県">長崎県</option>
144
-
145
- <option value="熊本県">熊本県</option>
146
-
147
- <option value="大分県">大分県</option>
148
-
149
- <option value="宮崎県">宮崎県</option>
150
-
151
- <option value="鹿児島県">鹿児島県</option>
152
-
153
- <option value="沖縄県">沖縄県</option>
154
-
155
- </select></td>
156
-
157
- </tr>
158
-
159
- <tr>
160
-
161
- <th>市区町村名<span class="indis address">必須</span></th>
162
-
163
- <td><input type="text" id="address" name="address" class="validate[required]"></td>
164
-
165
- </tr>
166
-
167
- </table>
37
+ <table>
38
+
39
+ <tr>
40
+
41
+ <th rowspan="6" scope="row">ご住所</th>
42
+
43
+ <th>郵便番号 (半角数字)<span class="indis zip">必須</span></th>
44
+
45
+ <td>
46
+
47
+ <input type="text" id="zip1" name="zip1" id="zip1" class="validate[required,custom[number]]">
48
+
49
+ -
50
+
51
+ <input type="text" id="zip2" name="zip2" id="zip2" class="validate[required,custom[number]]">
52
+
53
+ <input type="button" id="btn" name="btn" value="郵便番号から検索"></td>
54
+
55
+ </tr>
56
+
57
+ <tr>
58
+
59
+ <th>都道府県<span class="indis pref">必須</span></th>
60
+
61
+ <td><select id="pref" name="pref" class="validate[required]">
62
+
63
+ <option value="">お選び下さい▼</option>
64
+
65
+ <option value="北海道">北海道</option>
66
+
67
+ <option value="青森県">青森県</option>
68
+
69
+ <option value="岩手県">岩手県</option>
70
+
71
+ <option value="宮城県">宮城県</option>
72
+
73
+ <option value="秋田県">秋田県</option>
74
+
75
+ <option value="山形県">山形県</option>
76
+
77
+ <option value="福島県">福島県</option>
78
+
79
+ <option value="茨城県">茨城県</option>
80
+
81
+ <option value="栃木県">栃木県</option>
82
+
83
+ <option value="群馬県">群馬県</option>
84
+
85
+ <option value="埼玉県">埼玉県</option>
86
+
87
+ <option value="千葉県">千葉県</option>
88
+
89
+ <option value="東京都">東京都</option>
90
+
91
+ <option value="神奈川県">神奈川県</option>
92
+
93
+ <option value="新潟県">新潟県</option>
94
+
95
+ <option value="富山県">富山県</option>
96
+
97
+ <option value="石川県">石川県</option>
98
+
99
+ <option value="福井県">福井県</option>
100
+
101
+ <option value="山梨県">山梨県</option>
102
+
103
+ <option value="長野県">長野県</option>
104
+
105
+ <option value="岐阜県">岐阜県</option>
106
+
107
+ <option value="静岡県">静岡県</option>
108
+
109
+ <option value="愛知県">愛知県</option>
110
+
111
+ <option value="三重県">三重県</option>
112
+
113
+ <option value="滋賀県">滋賀県</option>
114
+
115
+ <option value="京都府">京都府</option>
116
+
117
+ <option value="大阪府">大阪府</option>
118
+
119
+ <option value="兵庫県">兵庫県</option>
120
+
121
+ <option value="奈良県">奈良県</option>
122
+
123
+ <option value="和歌山県">和歌山県</option>
124
+
125
+ <option value="鳥取県">鳥取県</option>
126
+
127
+ <option value="島県">島県</option>
128
+
129
+ <option value="山県">山県</option>
130
+
131
+ <option value="島県">島県</option>
132
+
133
+ <option value="山口県">山口県</option>
134
+
135
+ <option value="徳島県">徳島県</option>
136
+
137
+ <option value="香川県">香川県</option>
138
+
139
+ <option value="愛媛県">愛媛県</option>
140
+
141
+ <option value="高知県">高知県</option>
142
+
143
+ <option value="福岡県">福岡県</option>
144
+
145
+ <option value="佐賀県">佐賀県</option>
146
+
147
+ <option value="長崎県">長崎県</option>
148
+
149
+ <option value="熊本県">熊本県</option>
150
+
151
+ <option value="大分県">大分県</option>
152
+
153
+ <option value="宮崎県">宮崎県</option>
154
+
155
+ <option value="鹿児島県">鹿児島県</option>
156
+
157
+ <option value="沖縄県">沖縄県</option>
158
+
159
+ </select></td>
160
+
161
+ </tr>
162
+
163
+ <tr>
164
+
165
+ <th>市区町村名<span class="indis address">必須</span></th>
166
+
167
+ <td><input type="text" id="address" name="address" class="validate[required]"></td>
168
+
169
+ </tr>
170
+
171
+ </table>
168
172
 
169
173
  </form>
170
174
 
@@ -174,7 +178,7 @@
174
178
 
175
179
  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
176
180
 
177
- crossorigin="anonymous"></script>
181
+ crossorigin="anonymous"></script>
178
182
 
179
183
  <script src="https://jpostal-1006.appspot.com/jquery.jpostal.js"></script>
180
184
 
@@ -182,114 +186,120 @@
182
186
 
183
187
  </html>
184
188
 
189
+ ```
190
+
191
+
192
+
185
193
 
186
194
 
187
195
 
188
196
 
189
197
  #### jquery
190
198
 
199
+ ```ここに言語を入力
200
+
191
201
  // jquery.jpostal.js
192
202
 
193
203
  $(function () {
194
204
 
195
- $('#zip').jpostal({
205
+ $('#zip').jpostal({
196
-
206
+
197
- click: '#btn',
207
+ click: '#btn',
198
-
208
+
199
- postcode: [
209
+ postcode: [
200
-
210
+
201
- '#zip1',
211
+ '#zip1',
202
-
212
+
203
- '#zip2'
213
+ '#zip2'
204
-
214
+
205
- ],
215
+ ],
206
-
216
+
207
- address: {
217
+ address: {
208
-
218
+
209
- '#pref': '%3',
219
+ '#pref': '%3',
210
-
220
+
211
- '#address': '%4',
221
+ '#address': '%4',
212
-
222
+
213
- '#address2': '%5'
223
+ '#address2': '%5'
214
-
224
+
215
- }
225
+ }
226
+
227
+ });
216
228
 
217
229
  });
218
230
 
231
+
232
+
233
+ // 郵便番号
234
+
235
+ $("#zip1,#zip2").change(function () {
236
+
237
+ if ($("#zip1").val() == "" || $("#zip2").val() == "") {
238
+
239
+ $('.indis.zip').html("必須");
240
+
241
+ $('.indis.zip').removeClass("ok");
242
+
243
+ return true;
244
+
245
+ } else {
246
+
247
+ $('.indis.zip').html("OK");
248
+
249
+ $('.indis.zip').addClass("ok");
250
+
251
+ }
252
+
219
253
  });
220
254
 
221
-
222
-
255
+
256
+
223
- // 郵便番号
257
+ // 都道府県
224
-
258
+
225
- $("#zip1,#zip2").change(function () {
259
+ $("#pref").change(function () {
226
-
260
+
227
- if ($("#zip1").val() == "" || $("#zip2").val() == "") {
261
+ if ($("#pref").val() == "") {
228
-
262
+
229
- $('.indis.zip').html("必須");
263
+ $('.indis.pref').html("必須");
230
-
264
+
231
- $('.indis.zip').removeClass("ok");
265
+ $('.indis.pref').removeClass("ok");
232
-
266
+
233
- return true;
267
+ return true;
234
-
268
+
235
- } else {
269
+ } else {
236
-
270
+
237
- $('.indis.zip').html("OK");
271
+ $('.indis.pref').html("OK");
238
-
272
+
239
- $('.indis.zip').addClass("ok");
273
+ $('.indis.pref').addClass("ok");
240
-
274
+
241
- }
275
+ }
242
276
 
243
277
  });
244
278
 
245
-
246
-
279
+
280
+
247
- // 都道府県
281
+ // 市区町村名
248
-
282
+
249
- $("#pref").change(function () {
283
+ $("#address").blur(function () {
250
-
284
+
251
- if ($("#pref").val() == "") {
285
+ if ($(this).val() == "") {
252
-
286
+
253
- $('.indis.pref').html("必須");
287
+ $('.indis.address').html("必須");
254
-
288
+
255
- $('.indis.pref').removeClass("ok");
289
+ $('.indis.address').removeClass("ok");
256
-
290
+
257
- return true;
291
+ return true;
258
-
292
+
259
- } else {
293
+ } else {
260
-
294
+
261
- $('.indis.pref').html("OK");
295
+ $('.indis.address').html("OK");
262
-
296
+
263
- $('.indis.pref').addClass("ok");
297
+ $('.indis.address').addClass("ok");
264
-
298
+
265
- }
299
+ }
266
300
 
267
301
  });
268
302
 
269
-
270
-
271
- // 市区町村名
303
+
272
-
273
- $("#address").blur(function () {
304
+
274
-
275
- if ($(this).val() == "") {
276
-
277
- $('.indis.address').html("必須");
278
-
279
- $('.indis.address').removeClass("ok");
280
-
281
- return true;
282
-
283
- } else {
284
-
285
- $('.indis.address').html("OK");
286
-
287
- $('.indis.address').addClass("ok");
288
-
289
- }
290
-
291
- });
305
+ ```
292
-
293
-
294
-
295
- ####