JavaScriptでhtmlのInput要素のvalueを取得できない

Question

#行たいこと
生年月日を入力するフォームを作っているのですが、生年に対して下記の条件に合致しているかのバリデーションを行いたいと思っています。

①未入力ではない
②半角数字４桁での入力
③1951年〜2010年の間

それぞれ①→②→③の順に検証し、引っかかった場合にはエラーメッセージを出す、ということを行おうと思っています。
自分自身で下記の内容を参考に、①→②の部分は実装ができたのですが、③の部分で詰まっています。

参考にしたページ：https://qiita.com/ezawa800/items/6628890bb343cd6bbc14#%E6%96%87%E5%AD%97%E6%95%B0%E5%88%B6%E9%99%90

#ソースコードと現状把握している挙動

<h2>生年月日</h2>
  <div class="form-item birth">
    <input type="tel" maxlength="4" name="year" id="year" pattern="\d{4}" required>
    <p>年</p>
    <input type="tel" maxlength="2" name="month" id="month" pattern="\d{1,}" required>
    <p>月</p>
    <input type="tel" maxlength="2" name="day" id="day" pattern="\d{1,}" required>
    <p>日</p>
  </div>
  <div id="birth_error"></div>

//year
document.addEventListener("DOMContentLoaded", function(evt) {
  document.querySelector('#year').addEventListener('input', function(event) {
    var yearInput = event.target,
    yearErrorBox = document.querySelector('#birth_error');
    if (yearInput.checkValidity()) {
        yearErrorBox.innerHTML = '';
	return;
    }
    var regex = new RegExp(yearInput.getAttribute('pattern'));
    if (yearInput.value === "") {
        yearErrorBox.innerHTML = '生まれた年の入力は必須です。';
    } else if (!regex.test(yearInput.value)) {
        yearErrorBox.innerHTML = '生まれた年は4文字の半角数字で入力してください。';
    } else if (Number(yearInput.value) < 1951 || 2010 < Number(yearInput.value)) {
        yearErrorBox.innerHTML = '生まれた年は1951年〜2010年の間で入力してください';
    }
  });
});

console.log(yearInput.value);で確認をしたところ、console.logを//yearの１行下に入れた場合は半角数字４桁を入力しても
コンソールにその文字列が出力されているのですが、var regex = new RegExp(yearInput.getAttribute('pattern'));の1行下に入れた場合、
半角数字4桁を入力した場合consoleには出力されない（半角数字３桁未満や英字・全角文字などは表示される）といった挙動でした。

おそらくhtmlのinput#yearのpatternが何か原因なのか、と思い、pattern='\d'に書き直した（{4}を取った）ところ、無事エラーメッセージが表示されました。
ただこれでは条件②の４文字で入力、の部分が判定できなくなってしまうため、他の方法を探りたいと思い質問させていただきました。

伝わりづらいところなどもあると思いますが、お知恵お借りできますと幸いです・・・！

#質問者のレベル
html,css,js,python,Cの学習歴3ヶ月

Comments

[plasticgrammer]

ReactやVue.jsなどのライブラリは使用していないという前提でよいでしょうか？

[退会済みユーザー]

説明不足ですみません！仰る通りです！
（いつまでライブラリ無しでやるのか少し迷っていますが、、、）

[m.ts10806]

そもそも、提示のコードではJavaScriptのエラー出ています。
>Uncaught TypeError: yearErrorBox is null
「無事エラーメッセージが表示されました。」にはなりません。

[退会済みユーザー]

こちらも大変失礼いたしました・・・。
エラーメッセージ表示用のdiv要素の転記が抜けておりましたので、本文に追加いたしました。

[yambejp]

日付なのにtypeはtelなんですか？
y/m/dにわけないでtypeをdateにしてはいけないのですか？

[m.ts10806]

私もdate型賛成ですね。

[m.ts10806]

もう少し前提が欲しいところですね。
実現できれば手段は問わないのか、JavaScriptでしたい（しなければならない）のか。
極論言ってしまうと「サーバーサイドでのチェックは必須」ですが、どこまでの構想なのかこの内容では分かりませんので、ひとまず。

[plasticgrammer]

pattern="\\d{4}"とするとどうなりますか？

[退会済みユーザー]

こちら回答が遅くなってしまいすみません！
＞yambejpさん、m.ts10806さん
こちら自身の不勉強かもなのですが、date型のhtmlフォーム部品を柔軟に装飾する方法が見つからず、
また入力時に生年を選ぶ際にスクロールは手間かな・・・と思い、textで取得する方法で検討している、というのが今の状況となります！（説明不足ですみません！）
加えてtelにした理由としては下記などのページ（かなり古いものですが・・・）を読み、
またスマホで入力する際にtype=telだと数字入力前提のキーボードが起動すると聞き、そのようにしておりました・・・。
https://qiita.com/myzkyy/items/5630c32097aa68315cc5
https://dev.classmethod.jp/articles/mobile-html5-form/

＞m.ts10806さん
色々とご指摘ありがとうございます！とても勉強になります。
当初はサーバーサイド（pythonを想定しています）でのチェックのみを考えていたのですが、
少し調べたところhtml5である程度チェックができる、jsでコメントまでカスタムして出せる、と分かり手を出してみた次第です・・・！
個人的な勉強というあまり開発と関係ないかもしれない部分を考慮すると、「JavaScriptで実現したいが、しなければならないわけではない」という状況です。

＞plasticgrammerさん
pattern="\\d{4}"とすると、半角数字４桁でもpatternに反している、といったエラーチェックにひっかかる（②）ようになりました！
おそらく１つ目の\で2つ目の\をエスケープし、\d自体が認識していないのかもしれません
（これが合っているのかわかりませんが・・・）

ご質問いただきありがとうございます！

Answer 1

yearを独立してもつならnumberにすれば上限、下限が設定できます

<input type="number" name="year" min="1951" max="2010" required>

Comments

[退会済みユーザー]

なるほどtype=numberにすれば上限と下限設定ができるんですね・・・。
完全に後出しじゃんけんで恐縮なのですが、自分がtype=telを利用した理由が、下記などのページ（かなり古いものですが・・・）を読み、
またスマホで入力する際にtype=telだと数字入力前提のキーボードが起動するという点でした。
https://qiita.com/myzkyy/items/5630c32097aa68315cc5
https://dev.classmethod.jp/articles/mobile-html5-form/

もしよろしければ、type=numberでも入力キーボードの指定やjsでの非文字のキャッチ（もしくはnum以外の入力をする方法）などご存知でしたらご教授いただけますと幸いですz
※自分で試した範囲ではtype=numberですでに数値以外は入力できなくなっていそうですね・・・

Answer 2

ひとまずpattern="\d{3}"ではどうでしょう。

ただ、年で入力を制限する前提があるのでしたら「4文字の半角数字」というチェックはそもそも必要なのか？という検討は必要そうです。

あとは要件次第ですが
「年月日全て入力する必要がある」
かつ
「日付の形式として正しい」
かつ
「1951～2010年の間である」

で十分に思います。

Comments

[m.ts10806]

低評価された方、コメント願います。
ちなみにteratail運営に相談しており、返信も得られました。

>teratailでは嫌がらせ目的の低評価など、他ユーザー様への迷惑行為を禁止しております。
サイトの利用規約に違反する行為が見られた場合、必要に応じて操作の取り消しやアカウントの停止を行っております。

だそうです。
個別に注意喚起がきたあなた、不純なことやってないで、
指摘するなら真っ向から指摘しなさい。

[退会済みユーザー]

>m.ts10806さん
こちらありがとうございます！
確かに自分がお伝えしていることを実現しようとする（≒patternの正規表現部分を変更することで対応しようとすると）{3}とするのが良さそうですね
そしてご指摘の通り1951~2010の間である、ということを考えると４文字の数字であるというチェックはこれに内包されますね！ありがとうございます！！

[退会済みユーザー]

実際に試してみたところ、"1945"のような数値は想定通りの挙動だったのですが、"995"といった３桁の場合は何のエラーにも引っ掛からずでした・・・なぜ・・・

[m.ts10806]

どのように書いたか次第です。

[m.ts10806]

もしかしたらinputイベントよりもblurのほうがいいかもしれませんが。

[退会済みユーザー]

blurイベントの方がいちいち入力するたびメッセージが切り替わらなくてよいですね！！

色々と試行錯誤してみているのですが、そもそも「1aaa」など数字が含まれている際にどのエラーにも引っ掛からないので根本の何かがいけないのだろうと思い始めました・・・
やはりこのような場合は無理にjsでカスタムメッセージなど出そうとせず、基本フロントではhtml5の部品のみでエラーチェック（requiredやpatternなど）のみ行い、あとはサーバーサイドで行う、というのが良いのでしょうか

[m.ts10806]

むしろフロントでのチェックはなくてもいいくらいです。Javascriptも無効化できます。デベロッパツール使えばhtmlも改ざんできます（あくまで自分のセッションだけ）。

[m.ts10806]

いずれにしても「日付の形式として正しい」は必須ですね。

[think49]

@m.ts10806 さん
> ひとまずpattern="\d{3}"ではどうでしょう。

年月日のいずれも3桁ではないので、要件を満たさない気がします。
「1951年〜2010年の間」も正規表現に含めるとよりスマートかと。

pattern="19(5[1-9]|[6-9]\d)|20(0\d|10)"

低評価理由がこの件なら理由に納得しますが、問題点も改善点もいわないのは回答がいつまでも改善されなくなるので問題だと思います。

(2020/12/29追記)
babu_babu_baboo さんより正規表現の間違いを指摘頂き、修正しました。

[m.ts10806]

think49さん
ご指摘、アドバイスありがとうございます。「4桁が受け取れてない」というのがまずひとつの問題と認識し、4桁受け取れるようにはなるなということで、提示してみました。
そのあと、「そもそも年月日のように形式が決まっているのに桁数でチェックって？」ということでそのあとの回答に続けてみました。

不当と思われる低評価はここ何週間も続いてるので運営には相談し、続く場合は然るべき対処をする旨はいただいていますので、回答しやすくはなったのですが、やはり無言のままではどんな感情も伝わりませんからね。
やってることストーカーと同じですし。気づいてほしい。
自身のためにすらならない、質問者も巻き込んだ単なる迷惑行為であると。

[babu_babu_baboo]

> pattern="19([0-4]\d|51)|20(0\d|10)
これなら'1941'も通ってしまいます！
pattern="195[1-9]|19[6-9][0-9]|200[0-9]|2010"

[think49]

@m.ts10806 さん
> 4桁受け取れるようにはなるなということで、提示してみました。

ええと、pattern属性は完全一致なので、pattern="\d{3}"にすると、3桁しか受け取れず、4桁は受け取れなくなると思うのですが、私の勘違いでしょうか。

> 不当と思われる低評価

不当かどうかは理由を聞くまでわかりませんが、無言低評価は改善点が伝わらず、技術者らしからぬ行為とは思っています。
babu_babu_babooさんの回答への低評価も無言で、改善の為の発展的行為に結びつきません。
これらのデメリットを相殺する程の「無言であるべき正当な理由」が必要と思います。

---
@babu_babu_baboo さん
おお、確かに。
コメントを修正しました。
ご指摘ありがとうございます。

[m.ts10806]

>pattern="\d{3}"にすると、3桁しか受け取れず、4桁は受け取れなくなると思うのですが、

あれ？手元では4桁取れたのですけど…。質問者さんのコメントからも4桁が取れたであろうことは伺えます。

>低評価
大抵はきちんと指摘いただけるので、ない場合は私怨含めた迷惑行為だと認識しています。技術者らしからぬ行為という表現はピタリときます。
技術者でない人（または目指していない人）がteratailで低評価可能なくらいのアカウントを持っているのは気持ち悪さも時にありますね。

[babu_babu_baboo]

私への無言低評価の件、
ならば！年月日を SELECT要素を連動できるような自作ライブラリでも公開してやる！と意気込んで書き込んだら文字数制限を超えてしまいました。私だけでもいいので文字数制限を弄ってほしいです！

私はこの場で失うものがないので -999 に常にキープしてくれるならマイナスでもOKです。
（m.ts10806 さんは、これを生業としているのだから運営を通り越して弁護士に相談すべきです。）
（「嫉妬」って醜いものですね。それが男だったらなおさらに。）

[m.ts10806]

>これを生業としているのだから

いえ、してないです。
本業は本業できちんとあって、成果も出してます。
むしろ11,12月忙しくてteratailでの回答減っていたところだったし。
年末年始はそれはそれで家族サービスが。

[退会済みユーザー]

m.ts10806さん
ご回答ありがとうございます！
フロントの方でのバリデーションはそもそもなくても良い、少なくともセキュリティという意味ではほぼ無意味なんですね・・・（無意味は少し言い過ぎかもですが）
せめてユーザーがPOSTする前に入力ミスに気づけるよう最低限のチェックのみを行い、残りはサーバーサイドでチェックしようと思います。
本当に迷ったのですが、html、jsでの実装方法に関する質問であったため、その方向で一番情報量多くご回答いただいた回答をベストアンサーにしようと思います
（勿論、m.ts10806さんは自分の質問ややりとりから意図を汲んでいただきご回答いただいただけで、html, jsで自分の前提（type="tel"など）を変更してより効率的な方法を提示することもできたと思います）

失礼ながら他の回答者さんとのやりとりを拝見し、心無い低評価に辟易とされていると知りました。
うんざりすることも多いと思うのですが、自分のような初学者、そして本業がエンジニアでない人間にはm.ts10806さんのような方とのコミュニケーション１つ１つが大変勉強になりますので、
ぜひこれからもよろしくお願いいたします。

とても勉強になりました、ありがとうございます！

[m.ts10806]

なら、なぜ退会した…
心無い低評価に辟易としてることは確かですが、ちゃんと話の聞ける質問者やユーザーにはうんざりはしてないし、むしろ教えられる範囲で教えようとは思ってます。

Answer 3

イベントが発生したらすぐにエラーチェックをするのではなく、
ちょっと遅らせてエラーチェックする方法です

class DelayCBFunc {
  constructor (cbfunc, time = 500 /*ms*/) {
    this.cbfunc = cbfunc;
    this.time = time;
    this.tmid = null;
  }

  restart () { this.stop (); this.tmid = setTimeout (this.cbfunc, this.time);}
  stop () { if (this.tmid) this.tmid = clearTimeout (this.tmid);}
}

//エラーチェックを行う関数
function errCheck () {
  console.log('ok');
}

//遅れて実行するインスタンスを作る
const hoge = new DelayCBFunc (errCheck, 1000);//１秒後に起動

function handler (event) {
  console.log(event.timeStamp);
  hoge.restart ();//イベントが発生するたびリスタート
}

document.addEventListener ('input', handler, true);

質問を受けての追記
year のための盛大なチェックになりました。
type 属性を number にするべきだし
placeholder も活用すべきです。（ちょいとツッコミどころ満載！）
2月31日等をチェックする必要があります
いちいち pattan を取得してチェックしなくても好い時代になってます

<h2>生年月日</h2>
  <div class="form-item birth">
    <input name="year" type="text" maxlength="4" required
      pattern="195[1-9]|19[6-9][0-9]|200[0-9]|2010"
      placeholder="1951〜2010">
    <p>年</p>
    <input name="month" type="number" min="1" max="12" maxlength="2" required
      pattern="0?[1-9]|1[0-2]"
      placeholder="1〜12">
      >
    <p>月</p>
    <input name="day" type="number" min="1" max="31" maxlength="2" required
      pattern="0[1-9]|[12][0-9]|3[01]"
      placeholder="1〜31">
    <p>日</p>
  </div>
  <div id="birth_error"></div>


<script>

class DelayCBFunc {
  constructor (cbfunc, time = 500 /*ms*/) {
    this.cbfunc = cbfunc;
    this.time = time;
    this.tmid = null;
  }

  restart (...args) {
    this.stop ();
    this.tmid = setTimeout (this.cbfunc.bind (this, ...args), this.time);
  }
  
  stop () {
    if (this.tmid)
      this.tmid = clearTimeout (this.tmid);
  }
}


function errCheck (inp) {
  let { value, validity } = inp, mess = '';
  switch (true) {
    case validity.valueMissing ://required属性に違反
      mess = '生まれた年の入力は必須です。';
      break;
    case validity.patternMismatch : //pattern属性に違反
      mess = '生まれた年は適正な4文字の半角数字で入力してください。';
      break;
    case validity.rangeOverflow ://max属性に違反
    case validity.rangeUnderflow ://min属性に違反
    case validity.badInput ://何らかの入力不具合がある
      mess = '値が不正です';
      console.log(validity);
      break;
  }

  birth_error.textContent = mess;
}

const CHECKER = new DelayCBFunc (errCheck, 1000);

function handler (event) {
    CHECKER.restart (event.target);
}

document.querySelector ('input[name="year"]')
  .addEventListener ('input', handler, true);

</script>

年月日を一つの項目にしてはどうですか？（type属性を date にしない前提で）
テンキーで打ち込んだほうが早いですよね。
質問者さんが使いこなせるかどうか微妙ですが…
正規表現でマッチすれば、[全体,年,月,日]が返ってきます。
もちろん閏年も対応！

const reg = /^\s*(?=(?:195[1-9]|19[6-9][0-9]|200[0-9]|2010).*)(?!\d{4}\D*(?:(?:0?(?:2|4|6|9)|11)\D*31|0?2\D*30)\D*)(?!(?:(?:[02468][1235679]|[13579][01345789])00|\d{2}(?:\s*[02468][1235679]|[13579][01345789]))\D*0?2\D29\D*)([0-9]{4})\s*[年\-/]\s*(0?[1-9]|1[0-2])\s*[月/\-]\s*(0?[1-9]|[12][0-9]|3[01])\s*日?\s*$/;
console.log(reg.exec('1951-1-1'));

アドバイス
プログラムを書くときは、まずやりたいことを細分化します。
それを再構築して、機能ごとにまとめます。
要は１つの関数の中で、複雑なことをしないこと。

これで評価がプラスに転じるはzu...！

Comments

[think49]

コメントをつける場所を間違えました…。
https://teratail.com/questions/312481#reply-436307

[退会済みユーザー]

>babu_babu_babooさん
ご回答いただきありがとうございます！
自身の使い方が誤っているのだと思うのですが、下記のような利用をしたところ、半角数字の1951未満、2010超過がうまくエラー判定できませんでした。
移植した部分のaddEventListenerが余計なんでしょうか・・・？

```
class DelayCBFunc {
constructor (cbfunc, time = 500 /*ms*/) {
this.cbfunc = cbfunc;
this.time = time;
this.tmid = null;
}

restart () { this.stop (); this.tmid = setTimeout (this.cbfunc, this.time);}
stop () { if (this.tmid) this.tmid = clearTimeout (this.tmid);}
}

document.addEventListener("DOMContentLoaded", function(evt) {
document.querySelector('#year').addEventListener('input', function(event) {
var yearInput = event.target,
yearErrorBox = document.querySelector('#year_error');
if (yearInput.checkValidity()) {
yearErrorBox.innerHTML = '';
return;
}
var regex = new RegExp(yearInput.getAttribute('pattern'));
console.log(yearInput.value);
if (yearInput.value === "") {
yearErrorBox.innerHTML = '生まれた年の入力は必須です。';
} else if (!regex.test(yearInput.value)) {
yearErrorBox.innerHTML = '生まれた年は4文字の半角数字で入力してください。';
} else if (Number(yearInput.value) < 1951 || 2010 < Number(yearInput.value)) {
yearErrorBox.innerHTML = '生まれた年は1951年〜2010年の間で入力してください';
}
});
});

//遅れて実行するインスタンスを作る
const hoge = new DelayCBFunc (errCheck, 1000);//１秒後に起動

function handler (event) {
console.log(event.timeStamp);
hoge.restart ();//イベントが発生するたびリスタート
}

document.addEventListener ('input', handler, true);
```

[think49]

低評価された方へ
低評価理由を教えて下さい。

---
@babu_babu_baboo さん
pattern属性は input[type=number] では使用出来ません。
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/pattern

HTMLで input[type=number] を使うと↓が限界ですが、

<input type="number" name="year" min="1951" max="2010" step="1" required>

キーボード入力すると、少数が入力出来てしまうので完全なバリデーションにはJavaScriptによるチェックが必要になります。
従って、厳密にHTML側でバリデーションするなら、input[type=text][pattern] が妥当です。

<input type="text" name="year" pattern="19(5[1-9]|[6-9]\d)|20(0\d|10)">
https://momdo.github.io/html/input.html#number-state-(type=number)

> type=number状態は、数字のみで構成されるように出現するが、厳密に番号を伝えない入力に適さない。たとえば、クレジットカード番号や米国の郵便番号には不適切だろう。type=number決定する簡単な方法は、（たとえば"up"と"down"の矢印をもつ）スピンボックスインターフェイスを持つ入力制御が筋が通るかどうかを検討することである。最後の桁で1つ間違ったクレジットカード番号の取得は小さなミスではなく、すべての桁を間違って取得することと同じである。よって、ユーザーが"up"と"down"ボタンを使用してクレジットカード番号を選択することは筋が通らないだろう。スピンボックスインターフェイスが適切でない場合、type=textはおそらく正しい選択である（おそらくinputmodeまたはpattern属性を持つ）。

[babu_babu_baboo]

ツッコミは質問者にしてほしかったです。

>低評価理由
簡単です！パっとでの奴が書いたコードが、自分より章かに優れていて脅威だと感じたから。
ましてや、プロではないサンデー・プログラマーにだぜ？！

[babu_babu_baboo]

ツッコんでイキイキしてるなぁ～。（ボソっ）

[退会済みユーザー]

babu_babu_babooさん
こちら詳細、そしてコーディング例までご提示いただきありがとうございます！
おっしゃる通り今の自分はこのコードを見てすんなりと理解できるレベルではないのですが、
１つ１つリファレンスなどを見ながら読み解き理解いたします。

アドバイスも今後の勉強や実装時に心がけるようにいたします。
引き続きよろしくお願いします！