[Form] Request to add debounce validator

[linkfang]

What problem does this feature solve?

Mainly for a better validation experience for user and potentially a slightly better performance.

Debounce validator will not be triggered until user stops typing for a defined time period (e.g., 0.5s). And error message (if any) will be removed once user starts typing, so that user will not see a stale error message.

Two benefits from this:

1. User will not see the error message while typing (when validateTrigger is onChange). And the error message will show up once typing is done and there is something wrong. This will usually happen before user starts typing the next field/input (which is better than onBlur)
2. If a customized validator is a heavy function, then it will not be triggered on every value change (when it's onChange).

So, overall, user will only see an error message when he/she stops typing and there is something wrong. Otherwise, the error message will never show up if user types everything correctly.

I do see there are quite some issues related to adding debounce into form validation and with this feature built-in, all those problems will be solved! 😄

Thanks a lot!

---------- 中文 ----------

主要为了给用户提供更好的validate体验以及可能对提升效率有一点点帮助。

Debounce validator仅会在用户停止输入一定时间后触发（如，设置了0.5s），同时错误提醒也会在用户再次输入时被去除，确保输入过程中不会看到不适用的错误提示。

两点好处：

1. 当validateTrigger 是 onChange的时候，用户不会在输入的过程中就看到错误提示，仅会在其停止输入之后并且确实有错误时看到。只要debounce的时间没有设置很长，那么用户往往会在开始输入下一个文本框之前就看到错误提示，这样也要好于onBlur。
2. 如果一个自定义的validator是一个逻辑复杂或计算繁琐的function，那么它也不会在用户每改变一次输入的内容的时候就触发。

总得来说，用户只会在他停止输入并且确实有误的情况下看到错误提示，如果用户一切操作得当，那么自始至终都不会看到错误提示。

我也确实在repo里面看到了不少关于给form添加自定义的debounce的issue，所以如果官方支持该功能的话，所有相关问题就全部解决了~！

多谢了~！

What does the proposed API look like?

It would be great if we just add a new property called something like validateDebounce (in millisecond) in the Rule object, and make it 0 or false by default (depends on which is easier to add and maintain based on current implementation).
So, it would be something like:

<Form.Item
  label="Some Input"
  name="someInput"
  rules={[{ validator: ()=> { /* some code */ }, message: 'some text', validateDebounce: 500 }]}
>
  <Input />
</Form.Item>

Thanks a lot!

----------中文----------

如果我们可以在Rule object里面添加一个叫做validateDebounce (单位毫秒) 的property的话就太好了！默认值可以是0或者false，主要看哪个更方便于应用到当前的逻辑中并且更易于维护。大致的格式请参考上面👆🏻

非常感谢~！

[MadCcc]

Try validator with a debounced promise?

[Wxh16144]

我想我可能也会遇到你类似需求，我思考了一下，写了一临时我的解题思路 https://codesandbox.io/s/ji-ben-shi-yong-antd-5-8-6-forked-4qrcyx?file=/demo.tsx:0-2513

[linkfang]

Try validator with a debounced promise?

Hi, I tried adding debounce into validator function but it doesn't work. The returned Project.reject('some messages') will not be got by validator.
Here is what I did: https://codesandbox.io/s/basic-usage-antd-5-8-6-forked-g58myw?file=/demo.tsx
I added 2 different debounce functions to the 2 inputs, neither works. You will notice the console.log() does appear as expect, but the reject is not captured by validator, maybe I didn't do it correctly?

Thanks to @Wxh16144 , who offered a great work around. Basically, we can turn off the validateTrigger and manually call the debounced validator. This solved the problem, but still not as good as if AntD supports it out of box. With this built-in, all users can use this feature with just an extra property in Rule object without spending time to figure out a work around which not only takes time but also make it a little bit harder to read and maintain.

Here is my version based on @Wxh16144 's solution: https://codesandbox.io/s/biao-dan-xiao-yan-fang-dou-forked-hpdmxl?file=/demo.tsx

But still, it would be great if AntD could support this feature natively. Thanks!

[linkfang]

我想我可能也会遇到你类似需求，我思考了一下，写了一临时我的解题思路 https://codesandbox.io/s/ji-ben-shi-yong-antd-5-8-6-forked-4qrcyx?file=/demo.tsx:0-2513

666，非常感谢！
我之前一直尝试把debounce加在validator上面，完全忽略了可以关闭trigger，按照debounce的逻辑call validate。

我在你的基础上稍微改了一下，可以参考~
https://codesandbox.io/s/biao-dan-xiao-yan-fang-dou-forked-hpdmxl?file=/demo.tsx
我是从form层级全局设置debounce，这样可以省去自定义component，以及里面的state和hook一类的。

如果还是希望自定义component的话，我个人的倾向是直接在onChange里面处理逻辑，避免逻辑被嵌入一个长链条里面（React官方也推荐在onChange的地方直接做该做的事情，而不是把useEffect作为一种event listener来用：https://react.dev/learn/you-might-not-need-an-effect#sharing-logic-between-event-handlers ，不确定useUpdateEffect是不是也是类似useEffect是处理一些side effect的），不过onChange好像不存在在Form.Item里面，虽然其实真用的话，也起作用并且不会出错，而且AntD的doc里面也说可以用onChange，只是不要用来管理form的值一类的。所以如果自定义component，可能还是按照你的方法来，或者看有没有别的办法能够省掉useUpdateEffect一类的。

再次感谢提供的解决方案和思路~！非常受用！

---------- EN ----------

Thanks a lot! I have been trying to add debounce into validator function and completely forgot we could turn off validateTrigger and manually call it with deboucne.

I updated a little bit based on your solution, please refer it here: https://codesandbox.io/s/biao-dan-xiao-yan-fang-dou-forked-hpdmxl?file=/demo.tsx
I set the debounce logic on form level so that we don't need to do a customized component and all the state and effect management in it.

If we prefer to do a customized component, I personally would do the logic inside onChange to avoid a long chain logic (reference: https://react.dev/learn/you-might-not-need-an-effect#sharing-logic-between-event-handlers). But it seems onChange has some type error with Form.Item. Although AntD says it's OK to use it to handle logic other than value management. So, for now, I think your solution would be better for customized component, or maybe we could find some other way to remove useUpdateEffect.

Anyways, thanks again for your great solution! It helps a lot!

[linkfang]

Here are all related issues:

• [Form]async-validator使用debounce验证会触发异常 #40820
• V4 validator使用debounce后表现异常 #27753
• v4自定义validator怎么使用debounce #23517

Quite some people were trying the same thing, so it would really be AWESOME if AntD could support debounce validate. Then all future AntD users can just use a simple property validateDebounce to achieve what they need instead of taking time to find a proper way to make validator debounce. Thanks! 😄

---------- 中文 ----------
以上是所有我找到的相关问题。不少人都有尝试类似的功能，所以如果AntD官方支持的话就太棒了！这样所有未来的用户只需要添加一个简单的 validateDebounce property就能实现，就不再需要花时间去找到一个合适可用的解决方案。感谢~！

[Wxh16144]

Indeed, I've found people with the same need in issues, as you said, it would improve DX if the tool library supported out-of-the-box by default, looking forward to a design reply from the core members!

------ zh_CN ------
确实，我在 issues 中也发现类似同样需求的人，如你所说，如果工具库默认支持开箱即用，进一步提高 DX，期待一下核心成员的回复吧。cc @ant-design/ant-design-collaborators

[zombieJ]

It's not well to put in RuleObject since Form.Item support validateFirst and this will block the sequence. Create the validateDebounce at Form.Item prop instead.

ref #44633

[linkfang]

It's not well to put in RuleObject since Form.Item support validateFirst and this will block the sequence. Create the validateDebounce at Form.Item prop instead.

ref #44633

Awesome, sounds great!
Thanks A LOT for the super speedy action!!!
And thanks @MadCcc and @Wxh16144 for the help!!!