Vee-validate: Change what events trigger validation on a specific field

[TheJaredWilcurt]

Is your feature request related to a problem? Please describe.
I have an input field that must be a unique value. When the user types a value into it, Vee-Validate sets the field as pending, so we disable the save button. When the network request finishes we send back the true/false on whether it is unique. If the value is unique the pending goes away and the save button is enabled again. The user goes to click on the save button, but this pulls their focus out of the input field. Since the field is blurred it triggers another network request for uniqueness validation.

TLDR: Blur triggers double validation.

Describe the solution you'd like
Allow setting on a per-field level the specific events that trigger validation, and only use those events.

<input
  v-validate="'required|unique'"
  v-validate-on="input|keyup|blur|click"
  v-model="name"
  name="name"
  type="text"
/>

Describe alternatives you've considered
In my custom uniqueness validation function I could cache the last checked value and the last returned boolean and if the same value is passed in return the same boolean we did last time.

I don't like this as it adds complexity to the function that is a result of a side effect, rather than just resolve the source of the issue. Also I'm not even sure if it would work because this would skip the time it takes to make the network request, but the blur event would still trigger pending to occur, and though it would be momentary since the function would instantly return true, if the event that triggered the blur was clicking directly on the Save button, the user may still have to click save twice.

---

If there is already a feature to adjust what events trigger validation then it should be better documented/made more obvious, as I was not able to find it.

[logaretm]

The data-vv-validate-on allows you to do just that. I will try to make it
clearer in the documentation.

On Thu, 28 Jun 2018, 17:21 The Jared Wilcurt, [e-mail]
wrote:

Is your feature request related to a problem? Please describe.
I have an input field that must be a unique value. When the user types a
value into it, Vee-Validate sets the field as pending, so we disable the
save button. When the network request finishes we send back the true/false
on whether it is unique. If the value is unique the pending goes away and
the save button is enabled again. The user goes to click on the save
button, but this pulls their focus out of the input field. Since the field
is blurred it triggers another network request for uniqueness validation.

TLDR: Blur triggers double validation.

Describe the solution you'd like
Allow setting on a per-field level the specific events that trigger
validation, and only use those events.

v-validate="'required|unique'"
v-validate-on="input|keyup|blur|click"
v-model="name"
name="name"
type="text"
/>

Describe alternatives you've considered
In my custom uniqueness validation function I could cache the last checked
value and the last returned boolean and if the same value is passed in
return the same boolean we did last time.

I don't like this as it adds complexity to the function that is a result

of a side effect, rather than just resolve the source of the issue.

If there is already a feature to adjust what events trigger validation
then it should be better documented/made more obvious, as I was not able to
find it.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/baianat/vee-validate/issues/1442, or mute the thread
https://github.com/notifications/unsubscribe-auth/AF-KSn9rkH-UreMkRJOQzzURL1PNLSIuks5uBPSQgaJpZM4U7l7e
.

[logaretm]

It is documented here in the "Getting Started" Topic

https://baianat.github.io/vee-validate/guide/events.html