Joomla Community Builder的Edit Profile如何不保存无效日期并禁用报错时的保存按钮

方案1：绑定校验状态动态控制按钮状态 #

CB Query Validation默认仅做错误提示，不会自动拦截提交，你可以通过绑定字段校验状态实现按钮禁用：

• 找到你的可服务日期字段对应的校验规则，保持原有校验逻辑不变，在校验返回错误时，CB会自动存储该字段的错误状态，无需额外写存储逻辑
• 定位保存按钮的DOM节点或组件配置项，给按钮添加disabled动态属性，关联可服务日期字段的校验状态，只要字段存在校验错误，按钮自动置为不可用状态
• 如果你使用CB原生表单渲染能力，可以直接参考如下逻辑配置：

// 保存按钮状态控制示例
const saveBtn = document.querySelector('#profile-save-btn');
// 监听可服务日期字段变更，实时更新按钮状态
document.querySelector('#service-date-input').addEventListener('change', () => {
  // 调用CB校验API判断当前字段是否存在校验错误
  const hasValidError = CB_Query.getValidationError('profile_form', 'service_date') !== null;
  saveBtn.disabled = hasValidError;
  // 可自定义禁用状态的样式
  hasValidError ? saveBtn.classList.add('cb-disabled') : saveBtn.classList.remove('cb-disabled');
});

方案2：表单提交拦截兜底 #

即使做了按钮禁用，也要加一层提交拦截逻辑避免用户绕过前端校验提交数据：

• 监听个人资料表单的submit事件，在提交逻辑执行前先调用CB的全表校验接口
• 如果检测到可服务日期字段存在校验错误，直接终止提交逻辑，避免错误数据入库

// 提交拦截示例
document.querySelector('#profile-form').addEventListener('submit', (e) => {
  const hasOngoingTaskError = CB_Query.getValidationError('profile_form', 'service_date') !== null;
  if (hasOngoingTaskError) {
    e.preventDefault();
    // 可保留原有错误提示，无需额外新增
    return false;
  }
});

重要提示：前端所有校验都只是体验优化，后端一定要新增相同的校验规则，避免用户通过修改前端代码、直接调用接口等方式绕过校验提交错误数据。

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