Previously the validator instance had only one scope, the same scope as its owning Vue instance. so duplicate fields would conflict if they had the same name. one way to avoid conflict was to give them different names and give them the same display name. but if you had two forms within the same component and you wanted to display each form errors independently from each other that would be hard to do.
This new release offers scopes to handle this issue, you would give the fields a scope then you can provide a scope to the ErrorBag object methods, so it can locate those errors even if duplicate fields exists across different scopes. this can be done by providing a data-scope attribute on the field or on the form that contains the field.
here is a small example:
HTML:
<form data-scope="sign_up">
<input type="text" name="email" v-validate data-rules="required|email">
<span v-show="errors.has('email', 'sign_up')">{{ errors.first('email', 'sign_up') }}</span>
<button type="button" @click="validate('sign_up')">Validate</button>
</form>
<br><br>
<form data-scope="login">
<input type="text" name="email" v-validate data-rules="required|email">
<span v-show="errors.has('email', 'login')">{{ errors.first('email', 'login') }}</span>
<button type="button" @click="validate('login')">Validate</button>
</form>as you can see, most ErrorBag methods now allows an additional optional parameter to focus on a specific scope. any and clear and remove methods also have this additional parameter.
In addition to this, you can also trigger validation on all fields within a specific scope, using validator.validateAll which now accepts the name of the scope as a string. The following JS code completes the previous html:
Vue.use(VeeValidate);
new Vue({
el: 'body',
methods: {
validate(scope) {
this.$validator.validateAll(scope);
}
}
});A working example can be found here.
What else? some embarrassing bugs have been fixed. and some amazing people added new languages to the plugin, many thanks for each one of them.