Hey Gonzalo,

Very good points!

I agree, these are the three solutions I see as well and debounced onChange validation is the best solution in my opinion.

My thoughts:

Option A (onBlur)

Sync Validations - Pretty weird solution because of the UX quirk you mentioned
Async Validations - More appropriate because only one call will be made to the server when the user removes focus from the input element but still a little weird because the user has to figure out they need to click elsewhere to trigger validation

Option B (onChange with no debounce)

Sync Validations - Works fine, but as you mentioned, validations are run prematurely while the user is still typing
Async Validations - Pretty bad solution because the server will be spammed with requests every time the user types a letter

Option C (onChange with debounce)

Sync Validations - Good solution because validations will run once the user is done typing
Async Validations - Good solution because the server won't be spammed with requests

I was actually working on a debounce feature and sort of gave up because it mucked up the code quite a bit and i figured it would deter readers.

But, if i were to add anything else to this code, it would be a validateOnChangeDebounce parameter. A possible implementation might look like:

[
validateOnChangeDebounce,
setValidateOnChangeDebounce
] = useState(0);
let debouncedValidate = useRef();useEffect(
() => {
debouncedValidate.current = debounce(
() => {
form.validateFields(fieldsToValidateOnChange);
},
validateOnChangeDebounce
);
},
[validateOnChangeDebounce]
);
useEffect(
debouncedValidate.current,
[value]
);

No guarantees this code would work, but conceptually, I envision it working in that sort of way.

Thanks for the ideas!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store