如何在表单提交时聚焦并滚动到隐藏的自定义卡片复选框？

核心思路 #

jQuery Validation 主要针对表单原生元素做校验，所以我们需要把自定义卡片和一个隐藏的原生<input>绑定，借助原生 input 完成校验逻辑，在校验失败时定位到对应的自定义卡片，实现平滑滚动并模拟聚焦的视觉反馈。

1. HTML 结构

自定义卡片关联隐藏 input，点击卡片切换选中状态：

<form id="myForm">
  <!-- 自定义卡片复选框 -->
  <div class="custom-checkbox-card" data-target="#agreeInput">
    <span>我同意服务条款</span>
    <input type="hidden" id="agreeInput" name="agree" value="0">
  </div>

  <button type="submit">提交表单</button>
</form>

2. CSS 样式

给卡片添加选中、聚焦的视觉效果：

.custom-checkbox-card {
  padding: 12px 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin: 20px 0;
}
.custom-checkbox-card.checked {
  border-color: #2196F3;
  background-color: rgba(33, 150, 243, 0.1);
}
.custom-checkbox-card.focused {
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
}
.error {
  color: #dc3545;
  font-size: 14px;
  margin-top: 8px;
}

3. JavaScript 逻辑

• 绑定卡片点击事件，切换选中状态并同步更新隐藏 input 的值
• 配置 jQuery Validation 校验规则
• 在校验失败时定位到自定义卡片，执行滚动和模拟聚焦操作

$(function() {
  // 自定义卡片点击切换选中状态
  $('.custom-checkbox-card').on('click', function() {
    const $card = $(this);
    const $targetInput = $($card.data('target'));
    
    if ($card.hasClass('checked')) {
      $card.removeClass('checked');
      $targetInput.val('0');
    } else {
      $card.addClass('checked');
      $targetInput.val('1');
    }
  });

  // 初始化表单校验
  $('#myForm').validate({
    rules: {
      agree: {
        required: true,
        equalTo: '1' // 校验值为1，即已勾选状态
      }
    },
    messages: {
      agree: {
        required: '请勾选服务条款',
        equalTo: '请勾选服务条款'
      }
    },
    // 校验失败时的全局处理
    invalidHandler: function(event, validator) {
      const firstError = validator.errorList[0];
      // 判断第一个错误元素是我们的隐藏input
      if (firstError.element.id === 'agreeInput') {
        const $card = $('.custom-checkbox-card[data-target="#agreeInput"]');
        // 平滑滚动到卡片位置，偏移20px避免顶部导航遮挡
        $('html, body').animate({
          scrollTop: $card.offset().top - 20
        }, 300);
        // 模拟聚焦：添加高亮边框阴影，1.5秒后移除
        $card.addClass('focused');
        setTimeout(() => {
          $card.removeClass('focused');
        }, 1500);
      }
    },
    // 自定义错误提示位置
    errorPlacement: function(error, element) {
      if (element.attr('name') === 'agree') {
        error.insertAfter($('.custom-checkbox-card[data-target="#' + element.attr('id') + '"]'));
      } else {
        error.insertAfter(element);
      }
    }
  });
});

关键细节说明 #

• 隐藏 input 承载校验状态：jQuery Validation 无法直接校验自定义 div，通过隐藏 input 的值来标记是否勾选，用equalTo: '1'确保用户已完成勾选操作。
• 平滑滚动：用animate实现滚动过渡，offset().top获取卡片的顶部坐标，减去20px是为了避免被顶部固定导航遮挡。
• 模拟聚焦：自定义 div 无法调用原生focus()方法，通过添加focused类来给出视觉反馈，比如高亮的阴影边框。

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