多Bootstrap卡片表单验证：卡片头部错误图标按需显示方案

嘿，我来帮你搞定这个问题！咱们先理清核心需求：只有当卡片内存在无效字段时，才在卡片头部显示那个警告图标，而且完全不需要给每张卡片单独设置表单，在现有结构上就能实现。

第一步：给错误图标加默认隐藏类 #

首先修改你的卡片头部图标，给它加上Bootstrap的d-none类，让它初始状态是隐藏的：

<!-- 卡片头部的错误图标默认隐藏 -->
<i class="fa fa-exclamation-circle text-danger mr-1 d-none" aria-hidden="true"></i>

第二步：修改验证逻辑，关联卡片与字段有效性 #

接下来调整你的验证代码，让它能针对每个卡片单独检查内部字段的状态，然后控制图标的显示/隐藏。这里分两种场景处理：

场景1：表单提交时批量验证

如果你的验证是在表单提交时触发，用这段代码遍历所有卡片并判断：

$('form').on('submit', function(e) {
  e.preventDefault();
  
  // 遍历每一张卡片
  $('.card').each(function() {
    const $currentCard = $(this);
    let hasInvalidField = false;
    
    // 检查当前卡片内的所有表单字段
    $currentCard.find('.form-control').each(function() {
      // 这里替换成你实际的无效字段判断逻辑
      // 比如用Bootstrap自带的验证类，或者你自定义的验证规则
      if ($(this).hasClass('is-invalid')) {
        hasInvalidField = true;
        return false; // 找到无效字段就停止遍历当前卡片的字段
      }
    });
    
    // 根据判断结果切换图标显示状态
    const $errorIcon = $currentCard.find('.fa-exclamation-circle');
    hasInvalidField ? $errorIcon.removeClass('d-none') : $errorIcon.addClass('d-none');
  });
  
  // 这里可以添加所有字段都有效时的表单提交逻辑
});

场景2：实时验证（用户输入/失焦时）

如果需要用户输入过程中就实时更新图标状态，给每个表单字段绑定事件：

$('.form-control').on('blur input', function() {
  // 找到当前字段所属的卡片
  const $parentCard = $(this).closest('.card');
  let hasInvalidField = false;
  
  // 检查当前卡片内所有字段的有效性
  $parentCard.find('.form-control').each(function() {
    if ($(this).hasClass('is-invalid')) {
      hasInvalidField = true;
      return false;
    }
  });
  
  // 切换图标显示状态（toggleClass的第二个参数控制添加/移除）
  $parentCard.find('.fa-exclamation-circle').toggleClass('d-none', !hasInvalidField);
});

关于是否需要单独表单的疑问 #

完全不需要为每张卡片单独设置表单！通过jQuery的closest('.card')和find('.form-control')方法，就能轻松把卡片和内部的字段关联起来，这样既保持了表单结构的整体性，又能实现分卡片的验证反馈，维护起来也更方便。

如果你的项目用了Bootstrap自带的表单验证（needs-validation类），还可以直接用原生的checkValidity()方法来判断字段有效性，代码会更贴合Bootstrap的生态。

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