生年月日のフォームが全て入力されているかチェックする

Question

#実現したいこと
![]
上記のような生年月日を入力するフォームが全て入力されたら右端にチェックマーク（OKマーク）を出したい

#該当のコード

<select id="birthyear">
  <option value="2000">2000</option>
  <option value="2001">2001</option>
  <option value="2001">2002</option>
 </select>

<select id="birthmonth">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
 </select>

<select id="birthday">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
 </select>
<p id="birth_ok">OK</p>

$('#birthyear , #birthmonth, #birthday').change(function() {
    if($('#birthyear , #birthmonth, #birthday').children(':selected').val() == ''){
      $('#birth_ok').hide();
    } else{
      $('#birth_ok').show();
    }
  });

このコードだと思い通り動かないのはわかるのですが、年・月・日の全てがselectされた場合のみOKを出すことができません。
ifの条件を（#birthyear).children(':selected').val() == '' && （#birthmonth).children(':selected').val() == '' && （#birthday).children(':selected').val() == ''
とかもやってみたのですが、上手くいきませんでした。

よろしくお願いいたします

Comments

[退会済みユーザー]

３つに分離するのは時代遅れな気も

[wshielDi]

カレンダー表示も検討しましたが自分の生年月日のカレンダーまで行き着くのに時間がかかってしまうので、今回の形にしました。
他に良い方法があればご教授いただけると幸いです

Answer 1

こんにちは

この回答では、以下のメソッドを使います。

JQueryのメソッド：

• map
• get

配列のメソッド：

• every
• some
• includes

まずHTMLのほうの各selectに、有効な値を選んでいないときの option を追加し、それらの value 属性を空文字列にしておきます。

<select id="birthyear">
  <option value="">---</option>
  <option value="2000">2000</option>
  <option value="2001">2001</option>
  <option value="2001">2002</option>
 </select>

<select id="birthmonth">
  <option value="">--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
 </select>

<select id="birthday">
  <option value="">--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<p id="birth_ok">OK</p>

上記のようにした上で、select の changeコールバックを以下のようにしておきます。

const selects = '#birthyear, #birthmonth, #birthday';
  
$(selects).change(function() {
    
    const values = $(selects).map((i,e) => e.value).get();
    
    if (values.every(v => v)) {
      $('#birth_ok').show();      
    } else {
      $('#birth_ok').hide();            
    }

});

• 動作確認用ＣｏｄｅＰｅｎ: https://codepen.io/jun68ykt/pen/abOvozO?editors=1010

上記で、以下の行

const values = $(selects).map((i,e) => e.value).get();

によって、values に、3つのselect の各選択値を要素とする配列を取得できます。たとえば、年月日の年に 2001、月に3が選ばれており、日はまだ選ばれていないとすると、values は ["2001", "3", ""]になります。

「OK」を表示するのは、この配列values の要素の全てが空文字列でないときです。そのような条件式は

if (values.every(v => v.length > 0)) {

となりますが、ちょっと横着すると、以下のようにも書けますので、上記ではこれを使っています。

if (values.every(v => v)) {

または、 includes を使うと、以下のように書けます。

    if (values.includes('')) {
      $('#birth_ok').hide();      
    } else {
      $('#birth_ok').show();            
    }

• 動作確認用ＣｏｄｅＰｅｎ: https://codepen.io/jun68ykt/pen/ZEGbzqQ?editors=1010

追記

上記のコードでは、いったん配列values を作りましたが、これを作らずに、以下のように書くこともできます。

  $(selects).change(function() {
    
    if ($(selects).get().every(e => e.value)) {
      $('#birth_ok').show();      
    } else {
      $('#birth_ok').hide();            
    }
    
  });

• 動作確認用ＣｏｄｅＰｅｎ: https://codepen.io/jun68ykt/pen/NWqGWPK?editors=1010

追記2

ご質問に挙げられているコードをなるべく活かす修正を追記しておきます。
以下のifで判定する条件の部分

$('#birthyear , #birthmonth, #birthday').children(':selected').val() == ''

で、 右辺の空文字列''と比較している、左辺
$('#birthyear , #birthmonth, #birthday').children(':selected').val()
は、 #birthyear の select で選ばれている option の値になるので、意図した比較になりません。
どのように修正すればよいかというと、
$('#birthyear , #birthmonth, #birthday').children(':selected') は、option を3つ含んでいますが、これら3つのoptionのうち、少なくとも1つは、そのvalueが空文字列である、という判定をするように、下記のように修正します。

$('#birthyear, #birthmonth, #birthday').children(':selected').get().some(e => e.value === '')

• 動作確認用ＣｏｄｅＰｅｎ: https://codepen.io/jun68ykt/pen/GRJJbvb?editors=1010

Comments

[wshielDi]

とても丁寧な解説をありがとうございます。
コードの意味も理解でき、理想通りの動きができました。
勉強になります！
本当にありがとうございました。

[jun68ykt]

どういたしまして。
> コードの意味も理解でき、理想通りの動きができました。
とのことでよかったです????