FormValidation.io动态添加带Alias别名的验证字段失效问题

问题 #

使用formvalidation.io v1.10.0对表单进行验证，动态添加带有Alias别名验证器的字段时，已在创建FV实例时注册Alias插件，其余验证器均正常工作，但自定义的lessThanMax和moreThanMin验证器无法正常生效。

相关字段添加代码：

const $sp_param_delay_min = $('#sp_param_delay_min');
const param_delay_max = $('#sp_param_delay_max');

_fv.addField($sp_param_delay_min[0].name, {
  validators: {
    callback: {
      message: 'You must fill at least one of the two delay fields',
      callback: (input) => {
        let is_valid =
          input.value !== '' || $sp_param_delay_max.val() !== '';

        _fv.updateFieldStatus(
          $sp_param_delay_max[0].name,
          is_valid ? 'Valid' : 'Invalid',
          'callback'
        );
        return is_valid;
      }
    },
    lessThanMax: {
      alias: 'callback',
      message: 'The delay min must be smaller than the delay max',
      callback: (input) => {
        let is_valid =
          input.value === '' ||
          $sp_param_delay_max.val() === '' ||
          parseInt(input.value) < parseInt($sp_param_delay_max.val());

        return is_valid;
      }
    },
    integer: {
      message: 'The delay min must be an integer'
    },
    greaterThan: {
      min: 0,
      message: 'The delay min must be greater than 0',
      inclusive: false
    }
  }
});

_fv.addField($sp_param_delay_max[0].name, {
  validators: {
    callback: {
      message: 'You must fill at least one of the two delay fields',
      callback: (input) => {
        let is_valid =
          input.value !== '' || $sp_param_delay_min.val() !== '';

        _fv.updateFieldStatus(
          $sp_param_delay_min[0].name,
          is_valid ? 'Valid' : 'Invalid',
          'callback'
        );
        return is_valid;
      }
    },
    moreThanMin: {
      alias: 'callback',
      message: 'The delay max must be greater than the delay min',
      callback: (input) => {
        let is_valid =
          input.value === '' ||
          $sp_param_delay_min.val() === '' ||
          parseInt(input.value) > parseInt($sp_param_delay_min.val());

        return is_valid;
      }
    },
    integer: {
      message: 'The delay max must be an integer'
    },
    greaterThan: {
      min: 0,
      message: 'The delay max must be greater than 0',
      inclusive: false
    }
  }
});

FV实例及插件注册代码：

const _fv = $modalForm.formValidation(
  {
    fields: {
      ...
    },
    plugins: {
      trigger: new FormValidation.plugins.Trigger({
        delay: {
          step_name: 0.5
        }
      }),
      bootstrap3: new FormValidation.plugins.Bootstrap3(),
      icon: new FormValidation.plugins.Icon({
        valid: 'fas fa-check',
        invalid: 'fas fa-times',
        validating: 'fas fa-refresh'
      }),
      sequence: new FormValidation.plugins.Sequence({
        enabled: true,
      }),
      alias: new FormValidation.plugins.Alias()
    }
  }
).data('formValidation');

失效原因 #

1. 自定义别名未提前注册：Alias插件需要显式注册自定义别名与原生验证器的映射关系，你直接在addField中使用lessThanMax和moreThanMin别名，但未提前告知FV这些别名对应callback验证器，导致FV无法识别并执行这些验证逻辑。
2. 同字段下多Callback验证冲突：同一个字段同时配置了原生callback验证器和基于callback的别名验证器，FV的验证逻辑会出现优先级覆盖，无法正确执行多个同类型的callback验证。

解决方案 #

1. 提前注册自定义别名 #

在创建FV实例后，立即通过Alias插件注册你的自定义别名：

// 注册lessThanMax和moreThanMin为callback验证器的别名
_fv.plugins.alias.addAlias('lessThanMax', 'callback');
_fv.plugins.alias.addAlias('moreThanMin', 'callback');

2. 调整字段验证器配置（可选优化） #

为避免同字段多callback冲突，可将逻辑合并或调整验证器结构。示例保留原有逻辑，但确保别名已注册：

// 重新添加sp_param_delay_min字段验证器（别名已注册）
_fv.addField($sp_param_delay_min[0].name, {
  validators: {
    callback: {
      message: 'You must fill at least one of the two delay fields',
      callback: (input) => {
        let is_valid = input.value !== '' || $sp_param_delay_max.val() !== '';
        _fv.updateFieldStatus($sp_param_delay_max[0].name, is_valid ? 'Valid' : 'Invalid', 'callback');
        return is_valid;
      }
    },
    lessThanMax: {
      message: 'The delay min must be smaller than the delay max',
      callback: (input) => {
        let is_valid = input.value === '' || $sp_param_delay_max.val() === '' || parseInt(input.value) < parseInt($sp_param_delay_max.val());
        return is_valid;
      }
    },
    integer: {
      message: 'The delay min must be an integer'
    },
    greaterThan: {
      min: 0,
      message: 'The delay min must be greater than 0',
      inclusive: false
    }
  }
});

// 重新添加sp_param_delay_max字段验证器（别名已注册）
_fv.addField($sp_param_delay_max[0].name, {
  validators: {
    callback: {
      message: 'You must fill at least one of the two delay fields',
      callback: (input) => {
        let is_valid = input.value !== '' || $sp_param_delay_min.val() !== '';
        _fv.updateFieldStatus($sp_param_delay_min[0].name, is_valid ? 'Valid' : 'Invalid', 'callback');
        return is_valid;
      }
    },
    moreThanMin: {
      message: 'The delay max must be greater than the delay min',
      callback: (input) => {
        let is_valid = input.value === '' || $sp_param_delay_min.val() === '' || parseInt(input.value) > parseInt($sp_param_delay_min.val());
        return is_valid;
      }
    },
    integer: {
      message: 'The delay max must be an integer'
    },
    greaterThan: {
      min: 0,
      message: 'The delay max must be greater than 0',
      inclusive: false
    }
  }
});

3. 字段联动验证触发 #

由于两个字段值互相依赖，添加输入监听确保一方变化时另一方重新验证：

// 监听min字段输入，触发max字段重新验证
$sp_param_delay_min.on('input', function() {
  _fv.revalidateField($sp_param_delay_max[0].name);
});

// 监听max字段输入，触发min字段重新验证
$sp_param_delay_max.on('input', function() {
  _fv.revalidateField($sp_param_delay_min[0].name);
});

内容的提问来源于stack exchange，提问作者Samuel C.