This contains fixes for critical issues:

• Fix v-model watcher not setup correctly #454.
• Fix scoped flags overwriting/removing other fields objects.

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 a value property on the component that is watchable via the $watch API.

• validator.getLocale() is deprecated in favor of locale 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 and before 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 and before 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 preceding date_format rule.

• The rules with target field arguments like confirmed now respects the events you have specified using data-vv-validate-on attribute.

• You can access the rules and dictionary 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.

This is just a hotfix for #344

Breaking Changes

• Validator.validate now always returns a promise, similar to Validator.validateAll, previously it returned a boolean or a promise depending on the rules used which should ensure better stability. #324

Other

• Jest test framework has been replaced with ava for better syntax.
• bind cycle has been replaced with inserted cycle to reduce the form objects being null issues.
• Field name aliases now uses the Element.title attribute as a fallback for data-vv-as attribute.
• Optimize the update cycle by caching the expression.
• Validators now apply aria-invalid and aria-required on inputs and components root elements.
• Dictionary object has been exposed via validator.dictionary in case you needed access to it.
• Locales can now define a _default message to show for validators that do not have a message.
• Locale files has been built properly, you can import them directly from the node_modules and they should work correctly, if you include them in a script tag they will be auto installed if vee-validate is available globally.
• Added Validator.addLocale(object locale) method to make installing locales easier, the method is available both on the instances and statically.

Fixed Issues:

• Fixed an issue where fields weren't detaching properly when using v-if #314
• Fixed v-model detection issues in v-for loops #270
• Fixed SSR issues with Nuxt.js #310
• ignore v-model detection with complex paths, the validator can only watch simple object paths.

Changes:

• data-vv-delay now works with v-model
• errors.any and errors.all now display all errors across all scopes #311.
• The validator now follows an early-exit behavior when validating inputs, the order of rules is from left to right #222.
• data-vv-name attribute now takes precedence over name attribute.
• Added a shorthand for the object form so you no longer need to scope the rules object inside a rules property:

const rules = {
  required: true,
  email: true
};

Note that you cannot specify extra fields like scope when using this shorthand.

New Stuff

We got some PRs that contributed amazing features:

Automatic Classes

The plugin now allows you specify a collection of class names to be applied automatically on your inputs/components. Disabled by default.

to enable it you have to do this while registering the plugin:

Vue.use(VeeValidate, {
  enableAutoClasses: true, // false by default
  // Your classes
  classNames: {
    touched: 'touched', // the control has been blurred
    untouched: 'untouched', // the control hasn't been blurred
    valid: 'valid', // model is valid
    invalid: 'invalid', // model is invalid
    pristine: 'pristine', // control has not been interacted with
    dirty: 'dirty' // control has been interacted with
  }
});

Which should reduce tons of class binding repetitions in your code logic.

v-model Detection

If your input/component uses v-model, you are no longer required to pass the arg. as of this release the plugin will check if v-model is applied on the input/component and will allow it to watch it for value changes without additional listeners.

so before you used to do this:

<input type="text" v-model="email" v-validate:email="'required|email'">

or

<input type="text" v-model="email" v-validate="{ rules: 'required|email', arg: 'email' }">

You will be able to do this instead:

<input type="text" v-model="email" v-validate="'required|email'">

Which should reduce your code a bit, however like mentioned in #270 it still does not bind properly to loop iterators.

errors.firstRule('fieldName')

New method that allows checking if a field has a specific failing rule, which is helpful if you want to display errors from a CMS, meaning when you don't need the messages functionality.

<span v-show="errors.firstRule('email') === 'required'">FROM CMS: Email
is required</span>

<span v-show="errors.firstRule('email') === 'email'">FROM CMS: Email
invalid</span>

Fixed

• Provided a custom polyfill for both Array.from and Object.assign.
• Fixed an issue where files, checkboxes validation didn't work properly.

• Removed module field from package.json which caused the es6 build to be used instead which broke people's build.

Fixed:

• Fix an issue where the validator when validating a custom component wasn't resolving the current value of the component correctly.

This release contains major and breaking changes, I'm very sorry that this is the case but those frequent breaking changes will stabilize as we move towards the full release.

Features

• Dynamic rules. 💯
• Better scoping.
• ES6 Build.
• Smaller bundle size.
• Small improvements.
• Breaking changes 😞

Breaking Changes

Syntax

The validate directive now accepts either a string or an object literal to configure the field being bound to. the following object structure is considered valid:

<input type="text" name="email" v-validate="expression">

const expression = {
    rules: 'required|email',
    arg: 'form.email',
    scope: 'scope1'
};

If you only need to specify the rules, you can pass it directly, remember that it must evaluated as a string:

const expression = 'required|email';

You can also use object form to specify rules which allows greater flexibility specially with regex rule that had problems and conflicts with the parsing mechanism.

const expression = {
    rules: {
        required: true,
        regex: /.(js|ts)$/,
        in: [1, 2, 3]
    }
};

But that means you cannot validate data values or computed values in the same way anymore, so you are going to need to pass an arg into either the directive or the expression, like this:

<input type="text" name="email" v-validate:email="{ rules: 'required|email' }">
<!-- OR if you have a nested model you can also do this -->
<input type="text" name="email" v-validate="{ rules: 'required|email', arg: 'email' }">

Note that you can still use data-vv-rules, as it is not deprecated yet. but moving on to full release it might become.

These changes allows for dynamic rules, by simply binding the expression to a rules value that can be changed, the plugin will pickup when a rule is changed for a specific field and update it accordingly, meaning you can implement complex validation logic like required_if or some other rules that you can find in Laravel's validations, by updating the rules for that field according to whatever condition you might have.

Scopes

Scoping has been very inconsistent when pushed to certain limits, this had to do with how scopes are internally managed. due to some embarrassing short sight they were stored as keys in $fields property which of course caused the fields to overwrite each other since they have the same name even if in different scopes.

Scopes are now properly isolated from each other, a field name and its scope are now conditions of its uniqueness.

So here is some valid ways to specify a scope for an input:

<!-- Either on the parent form using the data-vv-scope attribute -->
<form data-vv-scope="myscope">
   <input type="text" name="email" v-validate="'required|email'">
</form>

<!-- or in the expression passed to the directive -->
<input type="text" name="email" v-validate="{ rules: 'required|email', scope: 'myscope' }">

<!-- or on inputs using data-vv-scope attribute -->
<input type="text" name="email" v-validate="'required|email'" data-vv-scope="myscope">

By default a scope called __global__ is present at the beginning which is the only scope name reserved that you cannot use, it will hold all non-scoped fields data, but it is also isolated from the other scopes so the following behaviors are changed:

• $validator.validate('someField', 'value'); will validate the field called someField that is located in the __global__ scope. So similar fields in other scope are not affected.
• errors.first or similar methods in the errorBag object without specifying a scope will limit the results to the __global__ scope, so errors.all() will only return the errors located in the __global__ scope and not all the items.
• $validator.validateAll will validate the fields located in the __global__ scope only and not all the fields, alternatively you can use $validator.validateScopes() to validate all scopes within the validator.

Other

$validator.validateAll returns promise that is now catchable, meaning it will throw an error when a validation fails, enabling you to do:

$validator.validateAll().then(() => {
    // success stuff.
}).catch(() => {
   // failure stuff.
});

So if you were expecting only a boolean value depending on the validation result, you need to handle it correctly using catch which should simplify your code considerably.

New Stuff:

• errors.first, errors.has and also $validator.validate now support dot notation to access fields with specific scope, for example:

// returns the first error found for the email field located in the scope: 'form1'.
errors.first('form1.email');

// returns the first error triggered by the rule 'required' for the email field
// located inside the scope 'form1'.
errors.first('form1.email:required');

// validate the email field located in form1 scope.
$validator.validate('form1.email', 'someValue');

• The plugin is now back to being built by rollup.js which reduced the bundle size down to half. The plugin footprint is around 9kb gzipped and minified.
• New ES6 build is now available in /dist/vee-validate.es2015.js which should be imported automatically by es module aware bundlers like rollup, which should even cut down the size of your package.

Breaking Changes

• Rework url rule: require protocol by default and replace domain parameter with a require protocol flag.
• When validating expressions, the expression will not be used as the field name anymore, instead it will use the name attribute.
• When specifying a component name, the validator looks for a name property then data-vv-name if not found, the priority is now reversed since the name property may not be the intended field name.

Fixed Issues

• Fix most issues with v-if and v-for, now missing/hidden fields won't be validated.
• Fix confirmed, after, and before rules not validating when the target field value changes if it was hidden.
• Fix files not being rejected after failing validation.
• Attempt to fix an issue when validating select elements not reacting to changes to the value, halting the functionality of the input.

Other

• New Locales: Persian, Hebrew.
• Update English messages to have better grammar.

Dist changes

Vue 2.0 version of the plugin will be the default version when installing using npm, the Vue 1.0 version will instead have the prev tag name, so from now on to install:

Installs Vue 2.x of the plugin

npm install vee-validate

installs Vue 1.x of the plugin

npm install vee-validate@prev