表单提交验证问题：点击提交后未显示必填项缺失提示

问题根源梳理 #

1. DOM元素获取错误：document.getElementsByClassName()返回的是元素集合，必须通过索引[0]获取单个元素；同时变量名定义与使用不匹配（定义name却调用name1）。
2. 语法错误：存在== =（多余空格）、语句未换行（let messages = [] if）、方法调用未分隔（e.preventDefault() errorElement.innerText）等语法问题。
3. HTML结构问题：存在无效注释-->干扰DOM解析；未正确添加required属性（用户提及添加但代码中缺失）。

修正后的代码 #

contact.html

<script defer src="script.js"></script>
<div id="error"></div>
<div class="con">
  <div class="he">
    <h1>Contact Us</h1><br>
    <p>Please feel free to contact us with any questions you may have around our coaching or online analysis.</p>
  </div>
</div>
<div class="con2">
  <div class="form">
    <form class="form" name="myform" method="GET">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" class="name1" required>
      <label for="lname" class="n">Last name:</label>
      <input type="text" id="lname" name="lname" class="name2"><br>
      <label for="email">Email:</label><br>
      <input type="email" id="mail2" name="email" class="mail" required><br>
      <label for="comment">Message or Comment:</label><br>
      <textarea name="comment" rows="10" cols="30" class="para" required></textarea><br>
      <button type="submit">Submit</button>
    </form>
  </div>
</div>

script.js

const name1 = document.getElementsByClassName('name1')[0];
const name2 = document.getElementsByClassName('name2')[0];
const mail = document.getElementsByClassName('mail')[0];
const para = document.getElementsByClassName('para')[0];
const form = document.getElementsByClassName('form')[0];
const errorElement = document.getElementById('error');

form.addEventListener('submit', (e) => {
  let messages = [];
  if (name1.value === '' || name1.value == null) {
    messages.push('名字是必填项');
  }
  if (mail.value === '' || mail.value == null) {
    messages.push('邮箱是必填项');
  }
  if (para.value.trim() === '' || para.value == null) {
    messages.push('留言是必填项');
  }
  if (messages.length > 0) {
    e.preventDefault();
    errorElement.innerText = messages.join(', ');
  }
});

额外优化说明 #

• 给必填项添加required属性，结合JS验证实现双重保障
• 邮箱输入框改为type="email"，浏览器自动验证格式合法性
• 留言框判断时使用trim()，避免空白字符被误判为有效内容
• 修复所有语法错误与DOM元素获取逻辑问题

内容的提问来源于stack exchange，提问作者Noman Ishfaq