年月日のバリデーションを行いたい

前提・実現したいこと

フォームから入力された年月日が正しいかどうかのバリデーションを行いたいです。

入力の形式は yyyy/mm/dd を想定しています。

発生している問題・エラーメッセージ

処理内の change_year に値が渡ってきていないようなのですが、理由がわからないです。

2つめの
error.innerHTML = '入力内容が正しくありません';
が表示されます。

学習中の身につき、初歩的な点が原因かもしれませんがヒントをいただければと思います。

該当のソースコード

  <form>
    年月日:<input type="text" id="year" value="" style="width:100px;" placeholder="例:2020/01/01"><br><br>
    <input type="button" id="btn" value="ボタン"><br><br>
  </form>

  <p id="error"></p><br><br>

  <p id="answer"></p>



// 曜日の表示
var answer = document.getElementById('answer');
// エラーメッセージ
var error = document.getElementById('error');
// ボタン 通常時は無効
var btn = document.getElementById('btn');
btn.disabled = true;
// 入力されたtextboxのID取得
var year = document.getElementById('year');
// 入力された値の取得
var year_num = year.value;
// Date型に変換
var change_year = new Date(year_num);
// 入力された年月日から曜日を取得
var get_date = change_year.getDay();
// 曜日
var ary = ['日','月','火','水','木','金','土'];


year.addEventListener('focusout',function(){
  if(!year_num.match(/^\d{4}/\d{2}/\d{2}$/)){
    error.innerHTML = '入力内容が正しくありません';
  }
    var y = year_num.split("/")[0];
    var m = year_num.split("/")[1] - 1;
    var d = year_num.split("/")[2];
  if(change_year.getFullYear() !== y || change_year.getMonth() !== m || change_year.getDate() !== d){
　　　// Invalid Date と表示される
　　　// console.log(change_year);
    error.innerHTML = '入力内容が正しくありません';
  } else{
      btn.disabled = false;
        btn.addEventListener('click',function(){
        answer.innerHTML = ary[get_date] + '曜日';
      }, false);
  }
}, false);

試したこと

変数 change_year の場所を色々変えてみましたが、うまく動作しませんでした。

maisumakun

2021/04/22 06:35

HTMLはどのようになっていますか？

退会済みユーザー

2021/04/22 06:38

ありがとうございます。 <form> 年月日:<input type="text" id="year" value="" style="width:100px;" placeholder="例:2020/01/01"><br><br> <input type="button" id="btn" value="ボタン"><br><br> </form> このように書いています。