teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップPHPに関する質問生年月日のフォームが全て入力されているかチェックする

編集履歴

回答編集履歴

12

テキスト修正

2020/02/12 00:10

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -132,7 +132,7 @@
132
132
 
133
133
  ```
134
134
 
135
- によって、3つの`select` の各選択値が配列となって `values` に取得できます。たとえば、年が `2001`、月が`3`、日がまだ選ばれていないと、`values` は `["2001", "3", ""]`になります。
135
+ によって、`values` に、3つの`select` の各選択値を要素とする配列を取得できます。たとえば、年月日の年に `2001`、月に`3`が選ばれており、日はまだ選ばれていないとすると、`values` は `["2001", "3", ""]`になります。
136
136
 
137
137
 
138
138
 

11

テキスト修正

2020/02/12 00:10

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -240,7 +240,7 @@
240
240
 
241
241
  ```javascript
242
242
 
243
- [...$('#birthyear, #birthmonth, #birthday').children(':selected')].some(e => e.value === '')
243
+ $('#birthyear, #birthmonth, #birthday').children(':selected').get().some(e => e.value === '')
244
244
 
245
245
  ```
246
246
 

10

テキスト修正

2020/02/11 23:46

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -180,7 +180,7 @@
180
180
 
181
181
 
182
182
 
183
- 上記の `change`コールバックは、以下のように書くこともできます。
183
+ 上記のコードでは、いったん配列`values` を作りましたが、これを作らずに、以下のように書くこともできます。
184
184
 
185
185
  ```javascript
186
186
 
@@ -204,7 +204,7 @@
204
204
 
205
205
  ```
206
206
 
207
- - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010](https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010)
207
+ - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/NWqGWPK?editors=1010](https://codepen.io/jun68ykt/pen/NWqGWPK?editors=1010)
208
208
 
209
209
 
210
210
 

9

テキスト修正

2020/02/11 18:48

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -188,7 +188,7 @@
188
188
 
189
189
 
190
190
 
191
- if ([...$(selects)].every(e => e.value)) {
191
+ if ($(selects).get().every(e => e.value)) {
192
192
 
193
193
  $('#birth_ok').show();
194
194
 

8

テキスト修正

2020/02/11 18:44

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,13 +2,19 @@
2
2
 
3
3
 
4
4
 
5
+ この回答では、以下のメソッドを使います。
6
+
7
+
8
+
5
- この回答では、JQueryのメソッド
9
+ JQueryのメソッド：
6
10
 
7
11
  - [map](https://api.jquery.com/map/)
8
12
 
9
-
13
+ - [get](https://api.jquery.com/get/#get2)
10
-
14
+
15
+
16
+
11
- および、配列のメソッド
17
+ 配列のメソッド：
12
18
 
13
19
  - [every](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every)
14
20
 
@@ -18,7 +24,7 @@
18
24
 
19
25
 
20
26
 
21
- を使います。
27
+
22
28
 
23
29
 
24
30
 

7

テキスト修正

2020/02/11 18:37

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,23 @@
2
2
 
3
3
 
4
4
 
5
- この回答では、配列のメソッドの [every](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every)　と、 [some](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some) を使います。
5
+ この回答では、JQueryのメソッド
6
+
7
+ - [map](https://api.jquery.com/map/)
8
+
9
+
10
+
11
+ および、配列のメソッド
12
+
13
+ - [every](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every)
14
+
15
+ - [some](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
16
+
17
+ - [includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
18
+
19
+
20
+
21
+ を使います。
6
22
 
7
23
 
8
24
 
@@ -134,7 +150,23 @@
134
150
 
135
151
 
136
152
 
153
+ または、 [includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) を使うと、以下のように書けます。
154
+
137
- 以上、参考になれば幸いです。
155
+ ```javascript
156
+
157
+ if (values.includes('')) {
158
+
159
+ $('#birth_ok').hide();
160
+
161
+ } else {
162
+
163
+ $('#birth_ok').show();
164
+
165
+ }
166
+
167
+ ```
168
+
169
+ - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/ZEGbzqQ?editors=1010](https://codepen.io/jun68ykt/pen/ZEGbzqQ?editors=1010)
138
170
 
139
171
 
140
172
 

6

テキスト修正

2020/02/11 18:32

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -58,7 +58,7 @@
58
58
 
59
59
 
60
60
 
61
- 上記のようにした上で、各`select` の changeコールバックを以下のようにしておきます。
61
+ 上記のようにした上で、`select` の changeコールバックを以下のようにしておきます。
62
62
 
63
63
 
64
64
 
@@ -74,7 +74,7 @@
74
74
 
75
75
 
76
76
 
77
- const values = [...$(selects)].map(e => e.value);
77
+ const values = $(selects).map((i,e) => e.value).get();
78
78
 
79
79
 
80
80
 
@@ -94,7 +94,7 @@
94
94
 
95
95
  ```
96
96
 
97
- - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/OJVVqay?editors=1010](https://codepen.io/jun68ykt/pen/OJVVqay?editors=1010)
97
+ - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/abOvozO?editors=1010](https://codepen.io/jun68ykt/pen/abOvozO?editors=1010)
98
98
 
99
99
 
100
100
 
@@ -106,7 +106,7 @@
106
106
 
107
107
  ```javascript
108
108
 
109
- const values = [...$(selects)].map(e => e.value);
109
+ const values = $(selects).map((i,e) => e.value).get();
110
110
 
111
111
  ```
112
112
 
@@ -142,7 +142,7 @@
142
142
 
143
143
 
144
144
 
145
- 上記の `change`コールバックは、以下のように、より行数を少なくできました。
145
+ 上記の `change`コールバックは、以下のように書くこともできます。
146
146
 
147
147
  ```javascript
148
148
 

5

テキスト修正

2020/02/11 18:01

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,13 +2,11 @@
2
2
 
3
3
 
4
4
 
5
- 一例としまして、以下のようにすればご要望のとおりになるかと思います。
6
-
7
-
8
-
9
-
10
-
11
- 各`select` で、有効な値を選んでいないときの `option` を追加し、それらの `value` 属性を空文字列にしておきます。
5
+ この回答では、配列のメソッドの [every](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every)　と、 [some](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some) を使います。
6
+
7
+
8
+
9
+ まずHTMLのほうの各`select`に、有効な値を選んでいないときの `option` を追加し、それらの `value` 属性を空文字列にしておきます。
12
10
 
13
11
  ```html
14
12
 

4

テキスト修正

2020/02/11 17:23

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -176,7 +176,9 @@
176
176
 
177
177
 
178
178
 
179
- ご質問に挙げられているコードをなるべく活かして修正するとすれば、以下の`if`で判定する条件の部分
179
+ ご質問に挙げられているコードをなるべく活かす修正を追記しておきます。
180
+
181
+ 以下の`if`で判定する条件の部分
180
182
 
181
183
 
182
184
 
@@ -188,7 +190,15 @@
188
190
 
189
191
 
190
192
 
193
+ で、 右辺の空文字列`''`と比較している、左辺
194
+
195
+ `$('#birthyear , #birthmonth, #birthday').children(':selected').val()`
196
+
197
+ は、 `#birthyear` の select で選ばれている option の値になるので、意図した比較になりません。
198
+
191
- を、以下のように修正します。
199
+ どのように修正すればよいかというと、
200
+
201
+ `$('#birthyear , #birthmonth, #birthday').children(':selected')` は、option を3つ含んでいますが、これら3つのoptionのうち、少なくとも1つは、そのvalueが空文字列である、という判定をするように、下記のように修正します。
192
202
 
193
203
 
194
204
 

3

テキスト修正

2020/02/11 17:14

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -176,7 +176,7 @@
176
176
 
177
177
 
178
178
 
179
- ご質問に挙げられているコードを修正するとすれば、以下の`if`で判定する条件の部分
179
+ ご質問に挙げられているコードをなるべく活かして修正するとすれば、以下の`if`で判定する条件の部分
180
180
 
181
181
 
182
182
 

2

テキスト修正

2020/02/11 16:46

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -169,3 +169,33 @@
169
169
  ```
170
170
 
171
171
  - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010](https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010)
172
+
173
+
174
+
175
+ ### 追記2
176
+
177
+
178
+
179
+ ご質問に挙げられているコードを修正するとすれば、以下の`if`で判定する条件の部分
180
+
181
+
182
+
183
+ ```javascript
184
+
185
+ $('#birthyear , #birthmonth, #birthday').children(':selected').val() == ''
186
+
187
+ ```
188
+
189
+
190
+
191
+ を、以下のように修正します。
192
+
193
+
194
+
195
+ ```javascript
196
+
197
+ [...$('#birthyear, #birthmonth, #birthday').children(':selected')].some(e => e.value === '')
198
+
199
+ ```
200
+
201
+ - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/GRJJbvb?editors=1010](https://codepen.io/jun68ykt/pen/GRJJbvb?editors=1010)

1

テキスト修正

2020/02/11 16:44

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -132,4 +132,40 @@
132
132
 
133
133
  ```
134
134
 
135
+
136
+
137
+
138
+
135
139
  以上、参考になれば幸いです。
140
+
141
+
142
+
143
+ ### 追記
144
+
145
+
146
+
147
+ 上記の `change`コールバックは、以下のように、より行数を少なくできました。
148
+
149
+ ```javascript
150
+
151
+ $(selects).change(function() {
152
+
153
+
154
+
155
+ if ([...$(selects)].every(e => e.value)) {
156
+
157
+ $('#birth_ok').show();
158
+
159
+ } else {
160
+
161
+ $('#birth_ok').hide();
162
+
163
+ }
164
+
165
+
166
+
167
+ });
168
+
169
+ ```
170
+
171
+ - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010](https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010)