2.0.0-beta.25

This is just a hotfix for #344

2.0.0-beta.24

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.

2.0.0-beta.23

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.

2.0.0-beta.22

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.

2.0.0-beta.21

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

2.0.0-beta.20

Fixed:

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

2.0.0-beta.19

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.

2.0.0-beta.18

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

1.0.0-beta.11

Contains the latest changes from 2.0.0-beta.17 for Vue 1.x

2.0.0-beta.17

• Fix #156 Where URL validation would fail if a domain was not specified.
• Fix #153 Where detaching a field would get stuck in infinite loop.
• Fix confirmed rule not applying the additional listener on the target field if no target field was specified.
• Fix an issue where validating a specific scope would clear all error messages instead of the messages belonging to that scope.