Javascript 多个引导卡上的表单验证

我正在使用Bootstrap4和jQuery。目前我有一个表格，里面有两张（或更多）BS卡。每张卡都包含应添加的客户数据字段

我已经集成了一个自定义验证，但目前我被卡住了。我不仅希望颜色显示有效和无效字段。我还希望在卡片的标题中有一个小图标，它包含一个无效的表单字段

在我的代码笔示例中，您可以看到图标已经出现。但如前所述，只有在该卡中存在错误（无效字段）时，才应如此

<i class="fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>

客户1
名字*
姓*
客户2
名字*
姓*
提交

观察

• 我添加了一个类隐藏
• 我已经为每张卡添加了id
• 使用这些ID，我将查找error元素并删除类hide
• 我将event.preventDefault作为示例，以避免发送该表单时出错

$（文档）.ready（函数（）{
addEventListener（'load'，function（））{
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'custom-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
event.preventDefault（）；//删除此
event.stopPropagation（）；//删除此
如果（！form.checkValidity（））{
event.preventDefault（）；
event.stopPropagation（）；
if（$（'#card_body_1'）.find（'.form control:invalid'）.size（）>0）{
$（“#卡体_1”）.parent（）.children（“.card header”）.find（“.fa感叹号圆圈”）.removeClass（'hide'）；
}否则{
$（“#卡体_1”）.parent（）.children（“.card header”）.find（“.fa感叹号圈”）.addClass（'hide'）；
}
if（$（'#card_body_2'）.find（'.form control:invalid'）.size（）>0）{
$（“#卡体_2”）.parent（）.children（“.card header”）.find（“.fa感叹号圆圈”）.removeClass（'hide'）；
}否则{
$（“#卡体_2”）.parent（）.children（“.card header”）.find（“.fa感叹号圈”）.addClass（'hide'）；
}
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
});
.hide{
显示：无！重要；
}

客户1
名字*
姓*
客户2
名字*
姓*
提交
这太棒了，埃利亚扎尔。谢谢你让我看到这一点。我以前从未做过类似的事。。。我刚刚在jQuery行中将size（）替换为length，这就像一个符咒。哦，我添加了一个each循环，我不知道会有多少张卡，它们会被动态添加$（'.card body'）.each（函数（）{if（$（this）.find（'.form control:invalid'）.length>0）{$（this）.parent（）.children（'.card header'）.find（'.fa感叹号圆圈'）.removeClass（'d-none'）；}else{$（this）.parent（）.children（'.card header'）.find（'fa感叹号圆圈'））.addClass（'d-none'）；}）@施魏泽肖吉：太棒了：-）