-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Validate on Blur, but validate correctly on input #1426
Comments
Just a thought in terms of creating an API for this... when declaring your input events, you could do something like |
@Dylan-Chapman Well that makes the API messier than I would like. I'm thinking about a new const behaviors = ['eager', 'aggressive', 'none'];
Vue.use(VeeValidate, {
behavior: 'eager' // if the field has an error and the user just entered a valid value, remove the error
}); I would call the requested behavior But there are issues with the concept itself, remote rules will always be executed in the background since the listeners will only control when to show the error rather than when to validate which is the current behavior. |
That would be really great feature for user experience :) |
Perhaps a solution would consist of something like this: Vue.use(VeeValidate, {
statusEvents: {
'pristine': 'blur',
'invalid': 'change',
'valid': 'blur'
}
}); statusEvents (or something similar) indicates the behavior per state of a field, where you could add listeners, and change the validation method for the field. Provides a lot of configuration for the user. This feature would be a great improvement for usability! P.S. It's a great plugin as it is, by far the best form validation tool i've used, so thank you! |
I like the approach @CephNightmare mentioned. It's simple/intuitive and you can maintain backwards compatibility by just allowing |
Just started using this plugin and this would be great to have! I really don't want to write any custom validation to perform this if it can be part of the API itself. |
The following something work.
|
Did you add this feature? @logaretm |
@tz136 Still working on getting few things correctly before I get to this one, I have a working draft for the |
Any update on this issue? |
@logaretm any news or eta ? :) |
Also eagerly looking forward to this. |
@aldarund So far the proposed API is to allow a function to provide an object of options for each field after each validation/render cycle. I would call a function that does this a "strategy" similar to what Anyways a validation strategy is able to provide a list of events that the next validation attempt should trigger on, along with a "debounce". I only implemented it so far for the <template>
<ValidationProvider :strategy="myStrat">
// ...
</ValidationProvider>
</template>
<script>
export default {
methods: {
// strats will receive an object containing
// useful contextual information about the field.
// like the current errors, if its valid or not.
// also the list of flags.
myStrat ({ errors, valid, untouched }) {
if (valid) {
// must always return an object.
return {
events: ['blur']
};
}
// must always return an object.
return {
events: ['input']
};
}
}
};
</script> This last example shows a strategy that validates on import { strategy } from 'vee-validate';
strategy('eager', ({ errors, valid, untouched }) => {
if (valid) {
return {
events: ['blur']
};
// must always return an object.
return {
events: ['input']
};
}); There are still issues to iron out like cross-field validation rules like For the directive, it would probably follow a global config option. Still, The directive needs to be re-written to take advantage of re-renders. Otherwise, it would be hard to implement for it in the current codebase (lots of moving parts). |
@logaretm have you seen the simple-vue-validator Interaction Modes? http://simple-vue-validator.magictek.cn/#m_modes. Unfortunately it does not have a mode that works as desired here (see semisleep/simple-vue-validator#53) but it has at least formalized the idea of interaction modes plus implemented and documented some options. |
This is exactly what I need in ValidationProvider. (Hoping for a release in a near future.) |
@tsongas I like the interaction mode concept as a replacement to the events configuration. This will be breaking change for all users but for the simplicity sake, I prefer users to be able to customize the events via one source only. So I will release a couple of intermediary releases deprecating the events option. @savehansson I think I'm able to do a release in a few days with this feature implemented in ValidationProviders, It works fine so far in my tests. We just have to test it with my team to see if the whole thing "feels right". |
🔎 __Overview__ Checklist: - [x] Implementation. - [x] Docs. This PR adds the ability to specify an interaction mode as formalized by [simple-vue-validator](http://simple-vue-validator.magictek.cn/#m_modes). There are 4 modes implemented for you by default: - aggressive: this is the default mode and it always validates on `input`. - passive: doesn't validate on any event, so you can only validate manually. - lazy: validate on `change`. - eager: validates on `change` for the first time, then if the field is invalid it will validate on `input`. If the field turns valid again it will go back to validating on `change`. This was a popular request by many developers #1426. You can customize the mode for each validation provider using the `mode` prop: ```vue <ValidationProvider rules="required|email" mode="eager"> <div slot-scope="{ errors }"> <input v-model="val"> <span>{{ errors[0] }}</span> </div> </ValidationProvider> ``` The vee-validate plugin has a new method `setMode` which will be used to provide custom modes and changing the mode dynamically as needed. ```js import VeeValidate from 'vee-validate'; // set all future providers default mode to passive. // does not affect existing ones. VeeValidate.setMode('passive'); ``` An interaction mode in vee-validate is a function that receives a context similar to the slot-scope props which can be used to customize the behavior of the validation. The function should return an object containing: - on: Array of event names as strings, those events will be used as triggers for validation. - debounce: A number to control the validation trigger frequency. Here is a small example: ```js import VeeValidate from 'vee-validate'; VeeValidate.setMode('betterEager', ({ errors }) => { // Become slightly aggressive if the field is invalid. if (errors.length) { return { on: ['input'], debounce: 400 }; } // validate after 2 seconds of leaving the field return { on: ['change'], debounce: 2000 }; }); ``` Currently, the mode receives an object with those properties: - errors: List of error messages. - flags: the field flag object. - value: the last validated field value. These properties may change in the future to make it more powerful. One thing is to make sure that the browser/components emit the configured events properly. __This feature will deprecate the `events` config but it will remain with a deprecation warning for a couple of releases.__ ✔ __Issues affected__ list of issues formatted like this: closes #1426, closes #1488, closes #501
When can we expect this to be released on npm? |
@ZacJoffe It's live since a couple of weeks: |
Hi, @logaretm. Is there a Vee Validate 4 equivalent for the "eager" behavior? Update: I just saw that there isn't and that there are no plans to add it right now. So I made a little workaround. |
Is your feature request related to a problem? Please describe.
Whenever using validate on blur, the user does not get feedback when re-entering the field, only after blurring.
Describe the solution you'd like
A good solution would be to always validate the input field, but only changing the state of the field when the field has been entered correctly to provide instant feedback when they correct their mistake.
An example flow would be for an input field with blur validation without the proposed:
The preferred method would be:
The text was updated successfully, but these errors were encountered: