jQuery Validation 移除d-none显示输入框后表单校验失效

• jQuery Validation 插件初始化时会按照自身默认的ignore: ":hidden"规则收集校验字段，所有被判定为隐藏的元素会直接排除在校验范围外
• 你使用的Bootstrapd-none类对应带!important优先级的display: none样式，当你点击按钮移除d-none让OTP输入框从隐藏变为可见时，插件内部的字段状态索引会出现错位：
  • 这个OTP输入框在初始化时没有绑定任何校验规则，原本是被插件标记为忽略的隐藏字段，现在突然变为可见，插件遍历校验字段的逻辑会直接卡在这个状态错位的字段上，终止整个校验流程
  • 最终表现就是点击提交时，所有其他字段的校验逻辑都被跳过，表单直接完成原生提交
• 这也是为什么你把那行移除d-none的代码注释掉，让OTP输入框一直保持隐藏状态，校验就能正常运行的核心原因

1. 从根上修正校验插件的ignore规则 #

不要依赖插件默认的:hidden匹配规则，在初始化表单校验时显式定义需要忽略的元素：

// 表单初始化校验的配置示例
$('#registerForm').validate({
  // 自定义忽略范围：只跳过明确标记、不需要校验的元素
  ignore: '.js-validation-ignore, input[type="submit"], button',
  // 保留你原有的所有字段校验规则配置
  rules: {
    // 原有字段的校验配置...
  }
})

• 这种配置可以完全绕开jQuery:hidden选择器对Bootstrap样式类的错误判定，不会因为元素的display状态变化触发校验中断
• 如果确实需要让某个元素不参与校验，直接给元素加js-validation-ignore类即可，插件会自动跳过，不需要依赖隐藏状态判定

2. 切换元素可见性时主动同步校验状态 #

动态显示OTP输入框的时候，不要只单纯操作类名，要主动和校验插件同步当前字段的校验状态：

$('.get_otp_btn').on('click',function(e){
  e.preventDefault();
  const $otpInput = $('#email_otp');
  const $getOtpBtn = $('#email_otp_btn');

  // 原有UI切换逻辑
  $getOtpBtn.addClass('d-none');
  $otpInput.removeClass('d-none');

  // 同步校验状态：点击获取OTP后再给输入框绑定必填规则
  $otpInput.rules('add', {
    required: true,
    messages: {
      required: '请输入邮箱收到的6位OTP验证码'
    }
  })
})

• 插件初始化时，OTP输入框是隐藏的、没有绑定任何校验规则，动态显示后如果不主动绑定规则，插件遍历到这个无规则的状态错位字段时，会直接终止整个校验流程
• 按照流程给不同显示状态的字段匹配对应的校验规则，比让插件靠可见性自动判断要稳定得多

3. 替代的隐藏实现方式（不推荐优先使用） #

如果不想调整校验配置，可以把OTP输入框的隐藏逻辑从d-none换成移出视口的实现，比如用绝对定位把元素移到屏幕外，而不是直接设置display:none，这种方式不会触发插件的hidden判定，但会影响无障碍体验，优先级低于前两个方案。

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