Prestashop 1.7.8表单验证：如何为未填必填字段添加error自定义类

以下两种方案都不需要修改Prestashop核心代码，兼容1.7.8全版本：

方案1：纯前端自定义实现（无需修改模板） #

适合不需要和后端返回错误联动的场景，直接通过JS拦截表单提交实现：

• 第一步：将以下代码写入你当前使用主题的自定义JS文件（一般为themes/你的主题名/assets/js/custom.js）

document.addEventListener('DOMContentLoaded', function() {
  // 默认注册表单选择器为form#customer-form，若主题有自定义可自行修改
  const registerForm = document.querySelector('form#customer-form');
  if (!registerForm) return;

  registerForm.addEventListener('submit', function(e) {
    // 先清除上一次提交的所有错误类
    registerForm.querySelectorAll('.form-control').forEach(field => {
      field.classList.remove('error');
      field.closest('.form-group')?.classList.remove('has-error');
    });

    let hasEmptyRequired = false;
    // 遍历所有必填字段校验
    registerForm.querySelectorAll('[required]').forEach(field => {
      if (!field.value.trim()) {
        hasEmptyRequired = true;
        // 为输入框添加自定义error类
        field.classList.add('error');
        // 为字段父级容器加错误类，方便同步高亮label（可选）
        field.closest('.form-group')?.classList.add('has-error');
      }
    });

    // 存在空必填字段时阻止表单提交
    if (hasEmptyRequired) {
      e.preventDefault();
      e.stopPropagation();
      // 可选：自动滚动到第一个错误字段位置
      registerForm.querySelector('.error')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  });
});

• 第二步：将高亮样式写入主题的自定义CSS文件（一般为themes/你的主题名/assets/css/custom.css）

/* 输入框错误样式 */
.form-control.error {
  border: 1px solid #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2);
}
/* label错误样式（可选） */
.form-group.has-error label {
  color: #dc3545;
}

• 第三步：清空Prestashop后台缓存后生效。

方案2：模板修改实现（兼容前后端错误联动） #

如果需要后端验证返回的错误也自动带上error类，可修改模板渲染逻辑：

• 找到主题下的字段模板文件：themes/你的主题名/templates/_partials/form-fields.tpl
• 找到输入框渲染的class定义部分，在原有错误类的基础上添加error类：

<!-- 修改前 -->
<input class="form-control{if $field.errors} is-invalid{/if}" ...>

<!-- 修改后 -->
<input class="form-control{if $field.errors} is-invalid error{/if}" ...>

• 保存后清空后台缓存，不管是前端校验还是后端返回的字段错误，都会自动带上error类。

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