Javascriptの条件分布が機能しない

下記コードにてテキストボックスが未入力の場合、送信ボタンを押したらアラートが出る様にしたいのですがうまくいきません。
教えて頂きたくお願い致します。

HTML：
<form action="test.html" method="POST" id="form">
<div class="question-form">
<div class="areas">
<div class="columns">会社名・団体名</div>
<div class="rows"><input type="text" name="sample" class="input-text"><br>(例：＊＊株式会社、＊＊大学＊＊学部＊＊学科)</div>
</div>
<div class="areas">
<div class="columns">氏名(漢字)<span class="red">(必須)</span></div>
<div class="rows"><input type="text" name="sample" class="input-text"><br>例：令和太郎)</div>
</div>
<div class="areas">
<div class="columns">氏名(フリガナ)<span class="red">(必須)</span></div>
<div class="rows"><input type="text" name="sample" class="input-text"><br>(例：令和タロウ))</div>
</div>
<div class="areas">
<div class="columns">メールアドレス<span class="red">(必須)</span></div>
<div class="rows"><input type="text" name="sample" class="input-text"><br>(例：[e-mail])<br><span class="red">半角</span>でお願いします。</div>
</div>
<div class="areas">
<div class="columns">メールアドレス(確認)<span class="red">(必須)</span></div>
<div class="rows"><input type="text" name="sample" class="input-text"><br>(例：[e-mail])<br><span class="red">半角</span>でお願いします．</div>
</div>
<div class="areas">
<div class="columns">郵便番号</div>
<div class="rows"><input type="text" name="sample" class="input-text"><br>(例：例：123-4567)<br><span class="red">半角</span>でお願いします。</div>
</div>
<div class="areas">
<div class="columns">住所</div>
<div class="rows"><input type="text" name="sample" class="input-text"></div>
</div>
<div class="areas">
<div class="columns">TEL</div>
<div class="rows"><input type="text" name="sample" class="input-text"><br>(例：例：03-1234-5678)<br><span class="red">半角</span>でお願いします。</div>
</div>
<div class="areas">
<div class="columns">FAX</div>
<div class="rows"><input type="text" name="sample" class="input-text"><br>(例：例：03-1234-5678<br><span class="red">半角</span>でお願いします。</div>
</div>
<div class="areas">
<div class="columns">お問合せ内容、お見積りはこちらへどうぞ<span class="red">(必須)</span></div>
<div class="rows"><textarea name="textarea" rows="10" cols="40" class="input-text"></textarea><br>(例：例：03-1234-5678)<br><span class="red">半角</span>でお願いします。</div>
</div>
<div class="columns-submit">内容をご確認の上、よろしければ下記ボタンをクリックして下さい。</div>
<div class="rows-submit"><input type="submit" name="sample" value="送信" class="input-text"></div>
<div class="submit-text">（上記ボタンを押した後、次の画面がでるまで、４～５秒かかりますので、続けて２回押さないようにお願いいたします。）</div>
</div>
</form>
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
Javascript：
let blank = document.querySelectorAll('.input-text').value;

document.getElementById('form').onsubmit = function() {
if(blank === "") {
window.alert('入力されていません');
return false;
}
};

質問者からの補足コメント

• 回答ありがとうございます。
  アドバイス頂きました点につきまして、
  
  ・まずは、スクリプトの位置はどこにあるのでしょうか。
  というのも、form要素よりも後にないと、querySelectorAllで何も取得できないはずです。
  ↓
  スクリプトは</body>の直前に入れました。
  
  ・次に、querySelectorAllの戻り値は要素リスト（=配列に似たオブジェクト）です。
  value属性で何が返るのかを確認してみましょう。
  ↓
  underfindと表示される。
  querySelectorAllはノードリストというひとかたまりのデータを取得する為、テキストの入力欄のデータを取得できるわけではない。
  
  ・さらには、仮にvalueを取得できたとしても（その時点では未入力状態）、その値を後でチェックしても未入力のまま変わらないはずです。
  ↓
  分かりませんでした。
  出来ればご教示お願い致します。

  No.1の回答に寄せられた補足コメントです。 補足日時：2020/09/16 21:36

No.3 ベストアンサー 回答者： fujillin 回答日時： 2020/09/17 15:11

No1です。

＞分かりませんでした。
＞出来ればご教示お願い致します。
え～～っと・・・

仮に、ご提示のコードがそのまま動作したとしての話ですが・・・
HTML表示時にスクリプトが解釈されて、要素の値を取得します。
仮に、値を無事取得できたとして、その値はユーザが入力前の値なので、当然ながら未入力となります。

その後、ユーザが入力なりして送信ボタンを押すと、スクリプトで設定しておいたfunctionが実行されますが、その中では上記の値(=未入力）を参照して判断しているので、常に未入力となり、質問者様の期待とは違う結果になるであろうということです。

要は、「イベント時の処理関数内で値を読み込む必要がある」ということですね。


一方で、スクリプトを利用するよりも、もっと簡単な解決方法をNo2様がご提案くださっています。

この回答へのお礼

回答頂きありがとうございます。

関数の内か外に記述することで処理が変わってしまうんですね。
ありがとうございました。

お礼日時：2020/09/17 20:30

No.2 回答者： Ogre7077 回答日時： 2020/09/16 23:15

<input> 要素の required 属性を指定する

https://developer.mozilla.org/ja/docs/Web/HTML/A …

この回答へのお礼

あっさりと解決して頂き誠にありがとうございます。
また質問させて頂く際には何卒お願い致します。

お礼日時：2020/09/17 20:28

No.1 回答者： fujillin 回答日時： 2020/09/14 08:49

こんにちは

いろいろありますけれど・・・

・まずは、スクリプトの位置はどこにあるのでしょうか。
というのも、form要素よりも後にないと、querySelectorAllで何も取得できないはずです。

・次に、querySelectorAllの戻り値は要素リスト（=配列に似たオブジェクト）です。
value属性で何が返るのかを確認してみましょう。

・さらには、仮にvalueを取得できたとしても（その時点では未入力状態）、その値を後でチェックしても未入力のまま変わらないはずです。
（実際にはvalueは取得できていませんが）

といったあたりを再確認してみれば、よろしいのではないでしょうか？


ご質問とは直接関係はありませんけれど、ご提示のHTMLで「必須」となっているのは、class=redの要素のようにみえますが、スクリプトでチェックしようとしているのは、class=input-textの要素みたいです。
なさりたいことと内容とが合致しているのでしょうか？？