如何用jQuery点击非提交按钮时检测分步表单必填字段是否为空

嘿，这个分步表单的验证需求很典型，我给你分享个既高效又贴合用户体验的实现思路——充分利用HTML5原生验证能力+少量JavaScript控制步骤切换，不用额外引入第三方库，代码简洁还可靠：

核心思路 #

HTML5本身就自带required属性和表单验证API（checkValidity()、reportValidity()），我们完全不用重复造轮子，直接基于这些原生能力来做，既能兼容绝大多数现代浏览器，又能提供符合用户使用习惯的错误提示。

完整代码示例 #

HTML结构 #

先把分步容器、必填字段和按钮搭建好：

<!-- 步骤1容器，默认显示 -->
<div id="step1" class="step">
  <input type="text" class="form-control" required placeholder="请输入姓名">
  <input type="email" class="form-control" required placeholder="请输入邮箱">
  <input type="tel" class="form-control" required placeholder="请输入手机号">
  <button id="nextbtn1">下一步</button>
</div>

<!-- 步骤2容器，默认隐藏 -->
<div id="step2" class="step" style="display: none;">
  <h3>步骤2：补充信息</h3>
  <input type="text" class="form-control" placeholder="请输入地址">
</div>

JavaScript逻辑 #

监听「下一步」按钮的点击事件，先验证步骤1的必填字段，全部通过后再切换步骤：

// 获取关键元素
const nextBtn = document.getElementById('nextbtn1');
const step1 = document.getElementById('step1');
const step2 = document.getElementById('step2');

nextBtn.addEventListener('click', function() {
  // 筛选步骤1内所有带required属性的字段
  const requiredFields = step1.querySelectorAll('[required]');
  let isAllValid = true;

  // 逐个验证字段状态
  requiredFields.forEach(field => {
    if (!field.checkValidity()) {
      isAllValid = false;
      // 触发浏览器原生错误提示（比如"请填写此字段"或格式错误提示）
      field.reportValidity();
      // 可选：给错误字段添加自定义样式（比如红边框）
      field.classList.add('input-error');
    } else {
      field.classList.remove('input-error');
    }
  });

  // 所有字段验证通过后，切换步骤
  if (isAllValid) {
    step1.style.display = 'none';
    step2.style.display = 'block';
  }
});

可选优化：用form元素简化验证 #

如果把步骤1的内容包裹在<form>标签里，验证逻辑会更简洁——form自带checkValidity()方法，能一次性检查所有子字段的合法性：

<form id="step1-form">
  <input type="text" class="form-control" required placeholder="请输入姓名">
  <!-- 其他必填字段... -->
  <button type="button" id="nextbtn1">下一步</button>
</form>

对应的JS代码可以简化为：

const form = document.getElementById('step1-form');

nextBtn.addEventListener('click', function() {
  if (form.checkValidity()) {
    // 验证通过，切换步骤
    step1.style.display = 'none';
    step2.style.display = 'block';
  } else {
    // 触发原生提示
    form.reportValidity();
    // 给所有不合法字段添加错误样式
    form.querySelectorAll(':invalid').forEach(field => {
      field.classList.add('input-error');
    });
  }
});

为什么这是最优方案？ #

• 原生API可靠：checkValidity()和reportValidity()是浏览器内置能力，兼容性覆盖IE10+，不用自己写复杂的正则或提示逻辑
• 用户体验统一：浏览器的原生提示符合用户使用习惯，不用自定义弹窗或文案，降低学习成本
• 代码简洁易维护：没有第三方库依赖，逻辑清晰，后期修改或扩展验证规则都很方便
• 扩展性强：如果需要自定义验证规则，还能结合setCustomValidity()方法添加个性化错误提示

内容的提问来源于stack exchange，提问作者Scott O'connor