Elementor Form：如何修改表单提交验证出错时的字段边框颜色

问题原因 #

你之前编写的CSS直接使用了:invalid伪类，该伪类默认会匹配所有未满足验证规则的必填字段，无论用户是否触发过提交操作，因此页面加载完成后空的必填字段就会直接显示高亮边框，不符合需求。

方案1：纯CSS适配（兼容现代浏览器） #

使用:user-invalid伪类替代:invalid，该伪类仅会在用户触发交互（点击提交、输入内容后清空、字段失焦等）后，才对不符合验证规则的字段生效，修改后的CSS如下：

.elementor-1983 .elementor-element.elementor-element-9cc556a .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper):user-invalid{
border-color: #55ce94;
}
/* 兼容旧版Webkit内核浏览器 */
.elementor-1983 .elementor-element.elementor-element-9cc556a .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper):-webkit-user-invalid{
border-color: #55ce94;
}

方案2：JS+CSS全浏览器兼容方案 #

如果需要覆盖不支持:user-invalid的旧版本浏览器，可通过添加提交标识类的方式实现，操作如下：

1. 添加自定义JS代码（可放入Elementor自定义代码的页脚区域，或主题自定义JS配置项中）：

document.addEventListener('DOMContentLoaded', function() {
  const targetForm = document.querySelector('.elementor-1983 .elementor-element-9cc556a form');
  if(targetForm) {
    targetForm.addEventListener('submit', function() {
      targetForm.classList.add('form-submitted');
    });
  }
});

2. 替换原有CSS代码，仅匹配已触发提交操作的表单下的无效字段：

.elementor-1983 .elementor-element.elementor-element-9cc556a.form-submitted .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper):invalid{
border-color: #55ce94;
}

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