Foundation Abide表单：点击增减按钮后错误提示未自动消失

安全阿岳

2026-8-20

Foundation Abide 按钮触发验证解决提示不消失问题

问题根源在于Foundation Abide默认只监听键盘输入、表单提交这类事件，通过按钮修改输入框值不会自动触发验证逻辑——所以哪怕值改成了正数，错误提示还是会停留在页面上。直接在增减按钮的点击事件里手动触发你的minZeroValidator，同步Abide的验证状态就能解决，具体实现如下：

操作步骤

给+/-按钮绑定点击事件，每次点击后执行以下操作：
1. 获取对应输入框的当前值
2. 用自定义的minZeroValidator校验值是否合法
3. 校验通过时：
  - 移除输入框的错误样式类（比如is-invalid）
  - 隐藏对应的错误提示元素
  - 调用Abide的revalidateField方法，让框架同步该字段的验证状态
4. 校验不通过时，保持或显示错误提示

代码示例（jQuery版本）

// 替换成你项目中增减按钮的选择器
$('.quantity-adjust-btn').on('click', function() {
  const $input = $(this).siblings('.quantity-input');
  const currentValue = parseFloat($input.val());
  // 调用你的自定义验证器
  const isValid = minZeroValidator(currentValue);

  if (isValid) {
    // 清除错误状态
    $input.removeClass('is-invalid');
    $input.siblings('.form-error').hide();
    // 通知Abide重新验证字段
    $(document).foundation('abide', 'revalidateField', $input);
  } else {
    // 显示错误状态
    $input.addClass('is-invalid');
    $input.siblings('.form-error').show();
  }
});

// 你的自定义验证器，可根据实际需求调整
function minZeroValidator(value) {
  return value !== '' && !isNaN(value) && value >= 0;
}