如何实现仅当必填字段已填写时才触发表单提交提示？

你的问题核心在于按钮的onclick事件会直接触发提示框，完全跳过了表单的原生必填验证流程。另外代码里还有两个容易忽略的小问题：

• 页面加载时就执行const name = textField.checkValidity();这类代码，但此时DOM元素还没渲染完成，会直接报错（textField等变量未定义）；
• 表单上写了onsubmit="return validateForm()"，但validateForm函数根本没实现，等于这个验证逻辑是空的。

我们需要让表单先完成原生的必填验证，只有验证通过后再弹出提交成功的提示，同时阻止表单默认的提交行为（因为不需要发到服务器）。具体调整如下：

1. 重构JS逻辑，绑定表单提交事件 #

把JS代码移到页面底部（确保DOM元素已加载），用表单的submit事件统一处理验证和提示：

// 等待DOM完全加载后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 获取表单元素
  const contactForm = document.querySelector('form[name="contactForm"]');

  // 绑定表单提交事件
  contactForm.addEventListener('submit', function(e) {
    // 阻止表单默认的跳转提交行为
    e.preventDefault();

    // 检查表单是否通过所有验证规则
    if (contactForm.checkValidity()) {
      // 验证通过，弹出成功提示
      alert("Thank you for your feedback. Your form has been submitted.");
      // 可选：验证通过后重置表单内容
      contactForm.reset();
    } else {
      // 触发浏览器原生的验证提示，告诉用户哪里填错了
      contactForm.reportValidity();
    }
  });
});

2. 清理冗余的事件绑定 #

• 移除按钮上的onclick="submitAlert();"属性，现在所有逻辑都通过表单的submit事件处理；
• 移除表单上的onsubmit="return validateForm()"，改用JS绑定事件更规范。

3. 修复HTML语法错误 #

你的几个<label>标签里的for属性少了等号（比如<label for "Name"），这会导致点击标签无法聚焦到对应输入框，修正为<label for="Name"即可。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
  <title>Contact Us</title> 
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> 
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&amp;display=swap" rel="stylesheet"> 
  <link rel="stylesheet" type="text/css" href="styles/restaurantStyles.css" /> 
  <style> 
    form { 
      margin: 0 auto; 
      align-content: center; 
      text-align: center; 
      font-family: 'Open Sans Condensed', sans-serif; 
      width: 35%; 
    } 
  </style> 
</head> 
<body> 
  <div class="container"> 
    <div class="jumbotron jumbotron-fluid"> 
      <header> 
        <h1 class="display-1">Burger Shack</h1> 
      </header> 
      <p class="lead"> New location in Rice Village coming April 2020!</p> 
    </div> 
    <nav> 
      <hr /> 
      <p>
        <a class="btn" href="index.html"> <img src="images/homeIcon.png" alt="Home Icon"></a> 
        <a class="btn" href="menu.html">Menu</a> 
        <a class="btn" href="contact.html">Contact Us</a> 
      </p>
    </nav> 
    <hr /> 
    <div class="container"> 
      <form name="contactForm" method="post" class="text-center border border-light"> 
        <div class="form-group row"> 
          <label for="Name" class="col-md-2 col-form-label"><b>Name:</b></label> 
          <div class="col-md-10"> 
            <input type="text" id="Name" name="Name" class="form-control" required> 
          </div> 
        </div> 
        <div class="form-group row"> 
          <label for="Email" class="col-md-2 col-form-label"><b>Email:</b></label> 
          <div class="col-md-10"> 
            <input type="email" id="Email" name="Email" class="form-control" required> 
          </div> 
        </div> 
        <div class="form-group row"> 
          <label for="Phone" class="col-md-2 col-form-label"><b>Phone:</b></label> 
          <div class="col-md-10"> 
            <input type="tel" id="Phone" name="Phone" class="form-control" minlength="10" maxlength="10" required> 
          </div> 
        </div> 
        <div class="form-group row"> 
          <label for="inquiry" class="col-form-label"><b>Reason for Inquiry:</b></label> 
          <div class="col"> 
            <select name="Reasons" id="inquiry" class="form-control"> 
              <option value="CateringDefault">Catering</option> 
              <option value="PrivateParty">Private Party</option> 
              <option value="Feedback">Feedback </option> 
              <option value="Other">Other</option> 
            </select>
          </div>
        </div> 
        <div class="form-group row"> 
          <label for="info" class="col-form-label"><b>Aditional Information:</b></label> 
          <div class="col"> 
            <textarea class="form-control" id="txtArea"></textarea>
          </div>
        </div> 
        <div class="form-group row"> 
          <label for="customer" class="col-form-label">Have you been to the restaurant?</label> 
          <div class="col"> 
            <div class="form-check form-check-inline"> 
              <input type="radio" id="no" name="answer" value="NO" class="form-check-input" checked /> 
              <label class="form-check-label" for="no">No</label>
            </div> 
            <div class="form-check form-check-inline"> 
              <input type="radio" id="yes" name="answer" value="YES" class="form-check-input" /> 
              <label class="form-check-label" for="yes">Yes</label> 
            </div>
          </div> 
          <div class="form-group row"> 
            <label for="choices" class="col-form-label">Best days to contact you:</label> 
            <div class="col"> 
              <div class="form-check-inline"> 
                <label class="form-check-label" for="M">M </label> 
                <input type="checkbox" id="M" name="choices" value="monday" class="form-check-input"> 
                <label class="form-check-label" for="T">T </label> 
                <input type="checkbox" id="T" name="choices" value="tuesday" class="form-check-input"> 
                <label class="form-check-label" for="W">W </label> 
                <input type="checkbox" id="W" name="choices" value="wednesday" class="form-check-input"> 
                <label class="form-check-label" for="Th">Th </label> 
                <input type="checkbox" id="Th" name="choices" value="thursday" class="form-check-input"> 
                <label class="form-check-label" for="F">F</label> 
                <input type="checkbox" id="F" name="choices" value="friday" class="form-check-input"> 
              </div>
            </div> 
          </div> 
        </div> 
        <div class="row"> 
          <button type="submit" id="submitButton" class="btn btn-default">Submit</button> 
        </div> 
      </form> 
    </div> 
  </div> 
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> 
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> 
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const contactForm = document.querySelector('form[name="contactForm"]');
      contactForm.addEventListener('submit', function(e) {
        e.preventDefault();
        if (contactForm.checkValidity()) {
          alert("Thank you for your feedback. Your form has been submitted.");
          contactForm.reset();
        } else {
          contactForm.reportValidity();
        }
      });
    });
  </script>
</body> 
<footer> 
  <hr /> 
  <p> 305 Gray Street, Houston, TX, 77004 <br /> 713-555-6752</p> 
</footer> 
</html>

• contactForm.checkValidity()会自动检查所有表单控件的验证规则（包括必填、邮箱格式、电话长度限制）；
• e.preventDefault()阻止表单默认跳转，避免页面刷新；
• contactForm.reportValidity()触发浏览器原生的错误提示，用户能清晰看到哪个字段不符合要求；
• 修复了<label>的语法问题，提升表单的可访问性。

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