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

編集履歴

回答編集履歴

12

テキスト修正

2020/02/12 00:10

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -65,7 +65,7 @@
65
65
  ```javascript
66
66
  const values = $(selects).map((i,e) => e.value).get();
67
67
  ```
68
- によって、3つの`select` の各選択値が配列となって `values` に取得できます。たとえば、年が `2001`、月が`3`、日がまだ選ばれていないと、`values` は `["2001", "3", ""]`になります。
68
+ によって、`values` に、3つの`select` の各選択値を要素とする配列を取得できます。たとえば、年月日の年に `2001`、月に`3`が選ばれており、日はまだ選ばれていないとすると、`values` は `["2001", "3", ""]`になります。
69
69
 
70
70
  「OK」を表示するのは、この配列`values` の要素の全てが空文字列でないときです。そのような条件式は
71
71
  ```javascript

11

テキスト修正

2020/02/12 00:10

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -119,6 +119,6 @@
119
119
  `$('#birthyear , #birthmonth, #birthday').children(':selected')` は、option を3つ含んでいますが、これら3つのoptionのうち、少なくとも1つは、そのvalueが空文字列である、という判定をするように、下記のように修正します。
120
120
 
121
121
  ```javascript
122
- [...$('#birthyear, #birthmonth, #birthday').children(':selected')].some(e => e.value === '')
122
+ $('#birthyear, #birthmonth, #birthday').children(':selected').get().some(e => e.value === '')
123
123
  ```
124
124
  - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/GRJJbvb?editors=1010](https://codepen.io/jun68ykt/pen/GRJJbvb?editors=1010)

10

テキスト修正

2020/02/11 23:46

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -89,7 +89,7 @@
89
89
 
90
90
  ### 追記
91
91
 
92
- 上記の `change`コールバックは、以下のように書くこともできます。
92
+ 上記のコードでは、いったん配列`values` を作りましたが、これを作らずに、以下のように書くこともできます。
93
93
  ```javascript
94
94
  $(selects).change(function() {
95
95
 
@@ -101,7 +101,7 @@
101
101
 
102
102
  });
103
103
  ```
104
- - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010](https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010)
104
+ - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/NWqGWPK?editors=1010](https://codepen.io/jun68ykt/pen/NWqGWPK?editors=1010)
105
105
 
106
106
  ### 追記2
107
107
 

9

テキスト修正

2020/02/11 18:48

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -93,7 +93,7 @@
93
93
  ```javascript
94
94
  $(selects).change(function() {
95
95
 
96
- if ([...$(selects)].every(e => e.value)) {
96
+ if ($(selects).get().every(e => e.value)) {
97
97
  $('#birth_ok').show();
98
98
  } else {
99
99
  $('#birth_ok').hide();

8

テキスト修正

2020/02/11 18:44

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,15 +1,18 @@
1
1
  こんにちは
2
2
 
3
+ この回答では、以下のメソッドを使います。
4
+
3
- この回答では、JQueryのメソッド
5
+ JQueryのメソッド：
4
6
  - [map](https://api.jquery.com/map/)
7
+ - [get](https://api.jquery.com/get/#get2)
5
8
 
6
- および、配列のメソッド
9
+ 配列のメソッド：
7
10
  - [every](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every)
8
11
  - [some](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
9
12
  - [includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
10
13
 
11
- を使います。
12
14
 
15
+
13
16
  まずHTMLのほうの各`select`に、有効な値を選んでいないときの `option` を追加し、それらの `value` 属性を空文字列にしておきます。
14
17
  ```html
15
18
  <select id="birthyear">

7

テキスト修正

2020/02/11 18:37

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,7 +1,15 @@
1
1
  こんにちは
2
2
 
3
- この回答では、配列のメソッドの [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) を使います。
3
+ この回答では、JQueryのメソッド
4
+ - [map](https://api.jquery.com/map/)
4
5
 
6
+ および、配列のメソッド
7
+ - [every](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every)
8
+ - [some](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
9
+ - [includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
10
+
11
+ を使います。
12
+
5
13
  まずHTMLのほうの各`select`に、有効な値を選んでいないときの `option` を追加し、それらの `value` 属性を空文字列にしておきます。
6
14
  ```html
7
15
  <select id="birthyear">
@@ -66,7 +74,15 @@
66
74
  ```
67
75
 
68
76
 
77
+ または、 [includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) を使うと、以下のように書けます。
69
- 以上、参考になれば幸いです。
78
+ ```javascript
79
+ if (values.includes('')) {
80
+ $('#birth_ok').hide();
81
+ } else {
82
+ $('#birth_ok').show();
83
+ }
84
+ ```
85
+ - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/ZEGbzqQ?editors=1010](https://codepen.io/jun68ykt/pen/ZEGbzqQ?editors=1010)
70
86
 
71
87
  ### 追記
72
88
 

6

テキスト修正

2020/02/11 18:32

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -28,7 +28,7 @@
28
28
  <p id="birth_ok">OK</p>
29
29
  ```
30
30
 
31
- 上記のようにした上で、各`select` の changeコールバックを以下のようにしておきます。
31
+ 上記のようにした上で、`select` の changeコールバックを以下のようにしておきます。
32
32
 
33
33
 
34
34
  ```javascript
@@ -36,7 +36,7 @@
36
36
 
37
37
  $(selects).change(function() {
38
38
 
39
- const values = [...$(selects)].map(e => e.value);
39
+ const values = $(selects).map((i,e) => e.value).get();
40
40
 
41
41
  if (values.every(v => v)) {
42
42
  $('#birth_ok').show();
@@ -46,13 +46,13 @@
46
46
 
47
47
  });
48
48
  ```
49
- - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/OJVVqay?editors=1010](https://codepen.io/jun68ykt/pen/OJVVqay?editors=1010)
49
+ - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/abOvozO?editors=1010](https://codepen.io/jun68ykt/pen/abOvozO?editors=1010)
50
50
 
51
51
 
52
52
 
53
53
  上記で、以下の行
54
54
  ```javascript
55
- const values = [...$(selects)].map(e => e.value);
55
+ const values = $(selects).map((i,e) => e.value).get();
56
56
  ```
57
57
  によって、3つの`select` の各選択値が配列となって `values` に取得できます。たとえば、年が `2001`、月が`3`、日がまだ選ばれていないと、`values` は `["2001", "3", ""]`になります。
58
58
 
@@ -70,7 +70,7 @@
70
70
 
71
71
  ### 追記
72
72
 
73
- 上記の `change`コールバックは、以下のように、より行数を少なくできました。
73
+ 上記の `change`コールバックは、以下のように書くこともできます。
74
74
  ```javascript
75
75
  $(selects).change(function() {
76
76
 

5

テキスト修正

2020/02/11 18:01

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,9 +1,8 @@
1
1
  こんにちは
2
2
 
3
- 一例としまして、以下のようにすればご要望のとおりになるかと思います。
3
+ この回答では、配列のメソッドの [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) を使います。
4
4
 
5
-
6
- 各`select` で、有効な値を選んでいないときの `option` を追加し、それらの `value` 属性を空文字列にしておきます。
5
+ まずHTMLのほうの各`select`に、有効な値を選んでいないときの `option` を追加し、それらの `value` 属性を空文字列にしておきます。
7
6
  ```html
8
7
  <select id="birthyear">
9
8
  <option value="">---</option>

4

テキスト修正

2020/02/11 17:23

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -87,13 +87,18 @@
87
87
 
88
88
  ### 追記2
89
89
 
90
- ご質問に挙げられているコードをなるべく活かして修正するとすれば、以下の`if`で判定する条件の部分
90
+ ご質問に挙げられているコードをなるべく活かす修正を追記しておきます。
91
+ 以下の`if`で判定する条件の部分
91
92
 
92
93
  ```javascript
93
94
  $('#birthyear , #birthmonth, #birthday').children(':selected').val() == ''
94
95
  ```
95
96
 
97
+ で、 右辺の空文字列`''`と比較している、左辺
98
+ `$('#birthyear , #birthmonth, #birthday').children(':selected').val()`
99
+ は、 `#birthyear` の select で選ばれている option の値になるので、意図した比較になりません。
96
- を、以下のように修正します。
100
+ どのように修正すればよいかというと、
101
+ `$('#birthyear , #birthmonth, #birthday').children(':selected')` は、option を3つ含んでいますが、これら3つのoptionのうち、少なくとも1つは、そのvalueが空文字列である、という判定をするように、下記のように修正します。
97
102
 
98
103
  ```javascript
99
104
  [...$('#birthyear, #birthmonth, #birthday').children(':selected')].some(e => e.value === '')

3

テキスト修正

2020/02/11 17:14

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -87,7 +87,7 @@
87
87
 
88
88
  ### 追記2
89
89
 
90
- ご質問に挙げられているコードを修正するとすれば、以下の`if`で判定する条件の部分
90
+ ご質問に挙げられているコードをなるべく活かして修正するとすれば、以下の`if`で判定する条件の部分
91
91
 
92
92
  ```javascript
93
93
  $('#birthyear , #birthmonth, #birthday').children(':selected').val() == ''

2

テキスト修正

2020/02/11 16:46

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -83,4 +83,19 @@
83
83
 
84
84
  });
85
85
  ```
86
- - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010](https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010)
86
+ - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010](https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010)
87
+
88
+ ### 追記2
89
+
90
+ ご質問に挙げられているコードを修正するとすれば、以下の`if`で判定する条件の部分
91
+
92
+ ```javascript
93
+ $('#birthyear , #birthmonth, #birthday').children(':selected').val() == ''
94
+ ```
95
+
96
+ を、以下のように修正します。
97
+
98
+ ```javascript
99
+ [...$('#birthyear, #birthmonth, #birthday').children(':selected')].some(e => e.value === '')
100
+ ```
101
+ - **動作確認用ＣｏｄｅＰｅｎ:** [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

answer CHANGED
@@ -65,4 +65,22 @@
65
65
  ```javascript
66
66
  if (values.every(v => v)) {
67
67
  ```
68
+
69
+
68
- 以上、参考になれば幸いです。
70
+ 以上、参考になれば幸いです。
71
+
72
+ ### 追記
73
+
74
+ 上記の `change`コールバックは、以下のように、より行数を少なくできました。
75
+ ```javascript
76
+ $(selects).change(function() {
77
+
78
+ if ([...$(selects)].every(e => e.value)) {
79
+ $('#birth_ok').show();
80
+ } else {
81
+ $('#birth_ok').hide();
82
+ }
83
+
84
+ });
85
+ ```
86
+ - **動作確認用ＣｏｄｅＰｅｎ:** [https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010](https://codepen.io/jun68ykt/pen/NWqqZqW?editors=1010)