1.0.0-beta.6

Documentation was removed from this repository in favor of a standalone repository here, which is accessible via this link

The reason was that too many commits were associated with the docs, also since the docs were being served from the next branch it caused sync issues with the master branch.

The new documentation uses vue-router for better performance and rendering and proper production setup.

All links have been updated reflecting this change.

2.0.0-beta.10

Fix a bug where an input couldn't find its scope if it is not a child of a form, causing the plugin to crash.

1.0.0-beta.5

Fix a bug where an input couldn't find its scope if it is not a child of a form, causing the plugin to crash.

2.0.0-beta.9

Latest tag broke field dependent rules like confirmed and after and before due to the addition of scopes. should be fixed now.

Scopes

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:

<div id="app">
    <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>
</div>

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: '#app',
    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.

1.0.0-beta.4

Latest tag broke field dependent rules like confirmed and after and before due to the addition of scopes. should be fixed now.

Scopes

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.

1.0.0-beta.2

Fix issue caused by the 1.0.0-beta releases that prevented the confirmed and after and before rules from attaching the extra listener for the target field.

Thanks for Michalis Rousos for pointing out this issue.

2.0.0-beta.7

Important Changes:

As mentioned here #10 The required rule was misleading in the previous releases, it implied that the fields that are not required should pass the validation if they had empty values and that is indeed the intended behavior. However that wasn't the case, some fields passed, some didn't depending on how each validates empty values.

This release fixes that behavior. From now on, all fields that do not have the required rule will pass the validation if they have empty values. Those empty values are: null, undefined and ''. if a non-empty value was provided it will proceed to validate them as before.

1.0.0-beta.1

Important Changes:

As mentioned here #10 The required rule was misleading in the previous releases, it implied that the fields that are not required should pass the validation if they had empty values and that is indeed the intended behavior. However that wasn't the case, some fields passed, some didn't depending on how each validates empty values.

This release fixes that behavior. From now on, all fields that do not have the required rule will pass the validation if they have empty values. Those empty values are: null, undefined and ''. if a non-empty value was provided it will proceed to validate them as before.

Bind on nextTick

As described here #9 the Vue 1.x dist wasn't detecting the bound values due to the directive hooks getting called before the DOM update cycle. It is delayed now until the nextTick so your bound values are updated. which is useful if you are creating some sort of a component that validates itself.

Note: This however is only working for initial rendering, the validator still caches the rules and will ignore any changes to the attributes its using data-as and data-rules. so you shouldn't mutate them dynamically.