javascript - form.io 如何在模糊上触发自定义验证？

Question

在 form.io 表单构建器中，我添加了自定义验证，但默认设置是触发更改验证，我想将其设置为模糊。

我在自定义验证选项卡上尝试了以下代码：

let field = document.querySelector('input[name="data[nametest]"]');
field.addEventListener("blur", checkValidation);




function checkValidation() { 
console.log('checking...');
          valid = (input.length > 5) ? true : 'Test name must be at least 5 characters long' ;
        }

代码在模糊上运行，但没有显示错误有效的全局变量设置为正确的错误消息它只是没有显示在表单上我还注意到文本字段上的字符越多，事件在模糊时触发的越多，如果有任何帮助，我将不胜感激。谢谢！

Answer 1

当您在 Form Builder 视图中时，有效性检查被禁用。您可以在组件设置模式中测试简单的验证：

现在，如果您想触发模糊操作，您必须考虑自定义验证不是持久的，并且在每次评估时都会计算，这意味着您在评估后对其进行的任何操作都不会影响组件本身。您需要将事件直接附加到组件实例中。

您可以通过两种方式实现此目的：

1. 使用隐藏组件

在您的表单中创建一个隐藏组件并将其设置为不持久（您不想存储值，只需运行）并定义一个自定义默认脚本以在表单呈现时运行。

const { root } = instance;
const comp = root ? root.getComponent('key') : null;

if (comp) {
  // remove any listener to avoid duplicates
  comp.off('blur');
  // define the on blur listener
  comp.on('blur', () => {
    console.log('blur');
  });
}

2. 准备好表格

Formio.createForm(document.getElementById('formio'), form).then((formio) => {
  const component = formio.getComponent('key');

  if (component) {
    component.on('focus', () => {
        console.log('focus');
    });
    component.on('blur', () => {
        console.log('blur');
    });
  }
});

这是一个工作示例：https ://jsfiddle.net/airarrazaval/ongcuwt2/

Answer 2

我不知道这个选项从哪个版本开始存在，但至少在 4.13 版本中，表单构建器有一个特定的属性来解决您的问题 - Validate On：

这也应该与您的自定义验证代码完美配合。