기본적으로 vuetify에서 vee-validate를 사용하면 묵시적으로 태그에서 change, click, blur등 다양한 이벤트가 발생할때마다 해당 field의 validation을 체크해준다.
이점은 장점이 될 수도 있지만 때로는 단점이 될 수 있다.
예를들면 Input tag에서 click event 발생 시 dialog를 띄우고 dialog 내부의 form을 통해 어떠한 데이터를 입력한다고 해보자. 그경우 input 태그를 클릭하자마자 띄워진 dialog 창으로 focus가 이동하면서 input에서는 blur event가 발생한다. 해당 이벤트로 인해 validation 체크가 일어나고, 혹여나 required prop이 선언되어있다면, validation 에러가 발생할 수밖에 없다.
이문제를 해결하기 위해서는 해당 ValidationProvider의 mode속성을 바꿔주면 된다.
github.com/logaretm/vee-validate/issues/379
Validate the input after submit, and not realtime · Issue #379 · logaretm/vee-validate
Versions: VueJs: #.#.# Vee-Validate: Description: Hallo, im searching for this for hours but i cant find the answer. I want to validate all fields on submit, and not realtime when im typing on the ...
github.com
해당 issue를 참고하여 해결했다. 위의 댓글 몇개는 예전 버전 기준이라 지금은 작동이 안된다. 이것 때문에 ㅠ 시간을 꽤 많이 잡아먹었다.
구글링 및 공식 사이트 api를 참고해서 찾은 내용은 mode="passive"선언만 하나 해주면된다는거고,
전체적으로 바꾸려면 github issue 마지막 댓글을 참고하면된다.
좀 더 자세히 살펴보려면,
logaretm.github.io/vee-validate/guide/interaction-and-ux.html#custom-modes
Interaction and UX | VeeValidate
Interaction and UX Client-side validation is a UX tool for your users, as such there are many strategies regarding when to validate?. There are multiple common strategies: Aggressive: Triggered when the user presses a key (on input). Passive: Triggered whe
logaretm.github.io
위 링크를 참고해서 해결하면 된다.
진작 api 문서를 봤으면 좀 더 빨리 해결 했을수도 있었을텐데, 괜히 구글링으로 해결하다가 더 헤맨것 같다.
'IT' 카테고리의 다른 글
| django 비밀번호 변경, 리셋 페이지 구현 (0) | 2020.11.12 |
|---|---|
| vue free flag icon 무료 국기 아이콘 (0) | 2020.11.07 |
| html 상단에 메뉴바 고정 시키는 방법 (0) | 2020.11.07 |
| Django unique_together 쓰지마세요~ (0) | 2020.11.06 |
| Django nested object write and read 작성하기. (0) | 2020.10.16 |