After a long time since the last release, a lot of issues has been addressed and much more needed improvements are added, also I'm happy to say the first release candidate as I'm confident with the current API and would like to continue along with it.
Breaking Changes 🔥
-
.initial
modifier now forces validation on the initial value instead of ignoring it, by default initial values will be ignored. previously it was supposed to ignore the initial value but the modifier had not effect. -
Custom components validation, you now won't need to provide a
data-vv-value-path
attribute, instead the validator will expect avalue
property on the component that is watchable via the$watch
API. -
validator.getLocale()
is deprecated in favor oflocale
getter. -
The flags API has deprecated, this change is needed because the previous API was fragile and hard to extend without changing a lot, however the flags are now accessed like regular objects, and they are now reactive, meaning you can use them in your computed properties.
Here is an example of how you would use the new flags API:
<div class="form-input">
<input type="text" name="field" v-validate="'required|email'" placeholder="Field">
<span v-show="errors.has('field')">{{ errors.first('field') }}</span>
<span v-show="fields.field && fields.field.dirty">I'm Dirty</span>
<span v-show="fields.field && fields.field.touched">I'm touched</span>
<span v-show="fields.field && fields.field.valid">I'm valid</span>
</div>
Notice that you need to check for the field existence before attempting to access the flags, that is to avoid component rendering errors since the flags objects are only available after the mounted() cycle.
Also flags now support scopes, for global level fields' flags, they will be available on the root flag object:
const isDirty = this.fields.email.dirty;
For scoped fields, their flags will be available in a property prefixed with $ to differentiate between a global level field and a scope:
const isDirty = this.fields.$scope.email.dirty;
For convenience a helper function mapFields
was added to skip these checks, it maps the fields flags to the component computed property, so you would need to specify which fields you need mapped, it is similar to Vuex's mapGetters
and mapActions
helper functions:
<script>
import { mapFields } from 'vee-validate'
export default {
// ...
computed: mapFields(['name', 'email', 'scope.phone']),
// ...
}
</script>
You can also use the object form to rename the mapped props:
<script>
import { mapFields } from 'vee-validate'
export default {
// ...
computed: mapFields({
fullname: 'name',
phone: 'scope.phone'
}),
// ...
}
</script>
Note that scoped fields names in the array from is mapped to a non-nested name. and you can use the object spread operator to add the mapped fields to your existing computed components:
<script>
import { mapFields } from 'vee-validate'
export default {
// ...
computed: {
...mapFields(['name', 'email', 'scope.phone']),
myProp() {
// ....
}
},
// ...
}
</script>
The available flags are:
touched
: The field has been focused at least once.untouched
: The field has not been focused at all.dirty
: The field value has been manipulated (even if it is the same).pristine
: The field has not been manipulated.valid
: The field has been validated at least once and is valid.invalid
The field has been validated at least once and is not valid.
You can set the flags using the flag
method on the validator instance:
// flag the field as valid and dirty.
validator.flag('field', {
valid: false,
dirty: true
});
// set flags for scoped field.
validator.flag('scoped.field', {
touched: false,
dirty: false
});
For custom components, in order for the flags to fully work reliably, you need to emit those events:
The input event, which you probably already emit, will set the dirty
and pristine
flags.
this.$emit('input', value);
The focus event which will set the touched
and untouched
flags.
this.$emit('focus');
Improvements 👏
-
The new
.disable
modifier halts all listening behavior for the validator. which was needed if you only want to trigger validation on demand instead of automatic, for example when a form is submitted. -
The
after
andbefore
rules now accept an inclusion flag as the second parameter, which allows the target equal date values to be valid as well. to enable it just pass any value as a second parameter.
after:target,true
-
The
after
andbefore
rules now accept a date value as an alternative to the field name, note that the date must be written in the same format as the precedingdate_format
rule. -
The rules with target field arguments like
confirmed
now respects the events you have specified usingdata-vv-validate-on
attribute. -
You can access the
rules
anddictionary
objects via the read only properties on the validator instance. -
The
date_between
rule also accepts moment's inclusive parameters #419
Bugs Squashed 🐛
-
The automatic class bindings now have their own listeners meaning they will be in sync with the flags. however they are not tied to the error object, meaning if you add custom errors you will have to invalidate the flags yourself using the API.
-
Can't remember the rest of the bugs, but plenty were fixed. I need to be better organized 😞.
Docs State
I will update the docs this week, so not all of the mentioned things will be updated there at least for a few days.