如何在jQuery中检查所有必填输入框是否已填写？

嘿，我完全懂你的烦恼——21个输入框一个个写判断逻辑，不仅繁琐还容易出错！咱们可以用更高效的方式批量检查所有必填输入框，同时还能兼顾原生表单的验证逻辑，下面给你两种实用的解决方案：

先纠正个小问题：你的jQuery代码有语法错误 #

先提个小细节，你当前的点击事件代码里，每个$选择器都少了左括号，这会导致代码无法正常运行，修正后应该是这样：

$("input[type='submit']").on("click", function(){ 
  $("input[type='text']:first-child").hide(100); 
  $("input[type='text']:last-child").show(100); 
})

方法一：复用原生表单验证（最省心） #

HTML原生的表单验证已经帮你处理了必填规则，咱们可以直接调用它的API，不用自己写判断逻辑：

$("input[type='submit']").on("click", function(e) {
  // 先阻止默认提交行为，避免页面直接跳转
  e.preventDefault();
  
  // 获取当前按钮所在的表单元素
  const form = $(this).closest('form')[0];
  
  // 检查表单所有元素是否符合验证规则（包括必填项）
  if (form.checkValidity()) {
    // 所有验证通过，执行你的输入框切换逻辑
    $("input[type='text']:first-child").hide(100); 
    $("input[type='text']:last-child").show(100);
    
    // 如果之后需要提交表单，可在这里调用：
    // form.submit();
  } else {
    // 触发原生的错误提示（和你最开始看到的"请填写此字段"提示一致）
    form.reportValidity();
  }
});

这个方法的好处是：原生已经帮你处理了各种验证场景（比如输入框空格也会被判定为空），而且提示样式和浏览器原生一致，不用额外写提示逻辑。

方法二：手动遍历必填输入框（自定义性更强） #

如果你想完全控制验证逻辑和提示样式，可以筛选所有带required属性的输入框，批量检查：

$("input[type='submit']").on("click", function(e) {
  e.preventDefault();
  
  // 标记是否存在未填写的必填项
  let hasEmptyField = false;
  
  // 遍历所有必填输入框
  $("input[required]").each(function() {
    // 去除输入内容前后的空格，避免空输入加空格绕过验证
    const inputValue = $.trim($(this).val());
    
    if (inputValue === "") {
      hasEmptyField = true;
      
      // 自定义提示：比如给输入框加红色边框
      $(this).addClass('required-error');
      
      // 弹出自定义提示（也可以用更美观的模态框代替alert）
      alert('请填写所有必填字段');
      
      // 找到第一个未填写的字段就停止遍历，提升效率
      return false;
    } else {
      // 移除错误样式（如果之前加过）
      $(this).removeClass('required-error');
    }
  });
  
  // 所有必填项都已填写，执行切换逻辑
  if (!hasEmptyField) {
    $("input[type='text']:first-child").hide(100); 
    $("input[type='text']:last-child").show(100);
  }
});

搭配一点CSS让错误提示更明显：

.required-error {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

为什么原来的原生验证失效了？ #

你之前的代码里，原生验证没触发主要有两个原因：

1. 语法错误：导致click事件绑定失败，代码逻辑没正常执行；
2. 未阻止默认行为：点击submit按钮后，浏览器默认会触发表单提交，可能页面还没来得及显示验证提示就跳转了。

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