react-hook-form - Mô tả về onTouched mode

Photo by RetroSupply on Unsplash

react-hook-form - Mô tả về onTouched mode

Vấn đề

Do mô tả ở trang chủ react-hook-form về onTouched khá dễ nhầm lẫn:

NameTypeDescription
onSubmitstringValidation is triggered on the submit event, and inputs attach onChange event listeners to re-validate themselves.
onBlurstringValidation is triggered on the blur event.
onChangestringValidation is triggered on the changeevent for each input, leading to multiple re-renders. Warning: this often comes with a significant impact on performance.
onTouchedstringValidation is initially triggered on the first blur event. After that, it is triggered on every change event.
allstringValidation is triggered on both blur and change events.

Trong đó câu mô tả về onTouched:

Validation is initially triggered on the first blur event. After that, it is triggered on every change event.

  • Cho tới khi user blur ô input, thì mới trigger validation. Vậy thì trước đó input liên tục sẽ không trigger việc validation. Đây là điểm khác biệt với "onChange" mode.

  • Change event ở đây nghĩa là change event nào? Đó là input hay blur event. Đây là điểm khó hiểu!

Thực nghiệm

Kết qua là Change event ở đây nghĩa là cả 2 event onBlur và onChange, tức là mode all. Mô tả kỹ hơn về "onTouched":

  • Ban đầu input - onChange diễn ra, nhưng không validate.

  • Chỉ khi click sang phần tử khác trên màn hình - onBlur thì mới validate lần đầu.

  • Kể từ thời điểm này, user input - onChange diễn ra, thì validate tương ứng (trái ngược với thời điểm ban đầu chưa có onBlur). Ngoài ra onBlur cũng validate.