Validate form when out of focus?

what do you mean? can you be more specific?

usually forms are validated when the input lose the focus

Currently, my form only show error message after you click the submit button. I would like to change it show error when the input lose focus.

I suppose for this you need to build you custom frontend validation, the cf7 validation is mostly server-side and some checks are done html tag validation, nothing else as far as i know.

https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

otherwise there are of the scripts for that, like validator.js

fyi another way to validate interactively the forms:

https://webkit.org/blog/7099/html-interactive-form-validation/
https://codepen.io/cdumez/full/zoOZmZ/