jQuery表单验证失败后，如何聚焦错误的输入字段？

刚好我之前也处理过类似需求，jQuery Validation其实自带了很方便的回调来实现这个功能，不用额外写复杂逻辑，给你两种靠谱的实现方式：

方法一：使用invalidHandler回调（推荐） #

这个回调会在表单验证失败时触发，我们可以在这里直接获取第一个验证不通过的元素并聚焦它：

$("#your-form").validate({
  // 你的验证规则
  rules: {
    username: {
      required: true,
      minlength: 3
    },
    email: {
      required: true,
      email: true
    }
  },
  // 自定义错误提示
  messages: {
    username: {
      required: "用户名不能为空",
      minlength: "用户名至少需要3个字符"
    },
    email: {
      required: "邮箱不能为空",
      email: "请输入有效的邮箱格式"
    }
  },
  // 验证失败时执行的逻辑
  invalidHandler: function(event, validator) {
    // 获取第一个验证失败的元素
    const firstErrorEl = validator.invalidElements().first();
    
    // 聚焦到该元素
    firstErrorEl.focus();
    
    // 可选：如果元素不在当前视口，添加平滑滚动效果
    $("html, body").animate({
      scrollTop: firstErrorEl.offset().top - 60 // 减去导航栏高度，避免被遮挡
    }, 300);
  }
});

关键说明： #

• validator.invalidElements()：返回所有验证失败的DOM元素集合，用.first()就能拿到第一个错误字段
• .focus()：直接让光标定位到该输入框
• 平滑滚动是加分项，能让用户快速看到错误位置，尤其是长表单场景

方法二：使用showErrors回调 #

如果需要在错误提示显示后再聚焦，也可以用这个回调：

$("#your-form").validate({
  // 规则和提示同上...
  showErrors: function(errorMap, errorList) {
    // 先调用默认的错误提示逻辑
    this.defaultShowErrors();
    
    // 如果有错误，聚焦第一个错误字段
    if (errorList.length > 0) {
      $(errorList[0].element).focus();
    }
  }
});

注意事项： #

1. 确保你的表单元素都有name属性，jQuery Validation是通过name来绑定验证规则的，没有name的元素不会被验证
2. 要先引入jQuery，再引入jQuery Validation的脚本，顺序不能错

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