エラーメッセージを表示したい。

Question

必須項目の値が入力されていたら、お問い合わせ完了ページが別ウインドウで開かれる。
その際に、form内の値をリセットする。
必須項目が入力されていない場合、formは送信されず、エラーメッセージが表示される。

ということがしたいです。
他のJSが邪魔をしているなどは、原因に含まれるのでしょうか？
他に原因が思い浮かばないのでどなたか教えて頂けますと、幸いです。

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

error.style.display = "block";が効かない。
それ以外は動いてると思います。

該当のソースコード

<form id="form" action="send.php" name="form" onsubmit="validate()"　target="_blank">
  <input id="need" type="text" name="name" required>
  <div id="error" style="display: none;">
    <p>お名前を入力してください</p>
  </div>

  <input id="need" type="text" name="kana" required>
  <div id="error" style="display: none;">
    <p>ふりがなを入力してください</p>
  </div>

  <input id="need" type="text" name="old" required>
  <div id="error" style="display: none;">
    <p>年齢を入力してください</p>
  </div>
  
  <button type="submit">送信する</button>
</form>

<script type="text/javascript">
function validate(){
  const form = document.getElementById("form");
  const need = document.getElementById("need");
  const error = document.getElementById("error");

if(need.value == null){
  return form;
  error.style.display = "block";
}else{
  form.submit();
  form.reset();
}
</script>

試したこと

classList.addを試してみましたが、うまくいきませんでした。
styleの指定を直書きでなく、cssファイルで記述してみました。これもうまくいきませんでした。

Answer 1

returnしたらそこで関数を抜けるのでerror.style.display = "block";が実行されることは永遠にありません。
置くならreturnの前です。

Comments

[zzziiii]

教えていただきありがとうございます。
早速試したのですが、うまくいきませんでした。。。
記述ミスがないか探してみます。。。。

[kairi003]

submitを中断したいならreturn falseします。
送信したいならreturn trueします。明示的にform.submitする必要はありません。
submit後はページがロードされるのでresetもいらないです。

[zzziiii]

お返事ありがとうございます。(涙)

function validate(){
const form = document.getElementById("form");
const need = document.getElementById("need");
const error = document.getElementById("error");

if(need.value == null){
error.style.display = "block";
return false;
}else{
return true;
}

に直してみたのですが、やはりエラーメッセージは表示されないままです。。。
他にやり方を考えたほうがよいのでしょうか？

[kairi003]

need.valueはnullにはならないとかですかね
undefinedでは？

[kairi003]

あとvalidateの閉じカッコが無いように見えます

[zzziiii]

本当ですね！試してみます！ありがとうございました！！