如何判断必填字段验证是否触发？表单提交弹窗提示需求咨询

嘿，作为前端新手碰到表单验证的需求太正常啦，我给你一个简单易上手的原生JS方案，完全符合你的要求：

核心思路 #

利用HTML5原生的表单验证API，监听表单的提交事件，先检查所有必填字段是否已填写，若有未填项则弹出你想要的提示弹窗，同时阻止表单提交。

具体实现步骤 #

1. 确保表单结构正确 #

先给表单加上一个ID（方便JS获取），提交按钮使用type="submit"类型：

<form id="largeForm">
  <!-- 你的必填字段示例 -->
  <div class="form-group">
    <label for="fname">姓名</label>
    <input name="fname" id="fname" type="text" class="form-control" required>
    <small class="text-danger">请填写姓名</small> <!-- 你已有的字段提示 -->
  </div>

  <!-- 其他更多必填字段... -->

  <button type="submit" class="btn btn-primary">提交</button>
</form>

2. 添加JS验证逻辑 #

在页面底部（或者DOM加载完成后）添加这段JS代码：

// 获取表单元素
const form = document.getElementById('largeForm');

// 监听表单提交事件
form.addEventListener('submit', function(e) {
  // 检查表单是否所有必填项都符合要求
  if (!this.checkValidity()) {
    // 弹出自定义提示弹窗
    alert('请填写必填字段');
    
    // 阻止表单默认提交行为（避免页面跳转）
    e.preventDefault();
    
    // 可选优化：让第一个未填写的必填字段获得焦点，方便用户快速定位
    const firstInvalidInput = this.querySelector(':invalid');
    if (firstInvalidInput) {
      firstInvalidInput.focus();
    }
  }
});

代码解释 #

• checkValidity()：这是HTML5原生的表单方法，会自动检查所有带required属性的字段，只要有一个未填写就返回false。
• alert('请填写必填字段')：就是你要的弹窗提示，新手用这个最直接，后续你可以换成自定义的模态框来美化。
• e.preventDefault()：阻止表单默认的提交行为，这样在有未填项时不会跳转页面。
• 聚焦第一个无效字段：这个是额外的用户体验优化，能帮用户快速找到需要填写的地方，你可以根据需求选择是否保留。

注意点 #

• 你已经在字段下方添加的常规提示会正常保留，这个JS逻辑不会影响它们的显示。
• 原生的required属性会在用户输入时自动做基础验证，配合这段JS就能实现你要的提交时统一弹窗提示。

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