vee-validate-testable
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.3 • Public • Published

    codecov Build Status Codacy Badge CDNJS npm npm Average time to resolve an issue Percentage of issues still open


    vee-validate is a plugin for Vue.js that allows you to validate input fields and display errors.

    You don't have to do anything fancy in your app -- most of the work goes into the html. You only need to specify for each input what kind of validators should be used when the value changes. The errors will be automatically generated. The plugin offers many validations out of the box.

    Although most of the validations occur automatically, you can use the validator however you see fit. The validator object has no dependencies and is a standalone object. This plugin is built with localization in mind. Read the docs for more info.

    This plugin is inspired by PHP Framework Laravel's validation.

    Installation

    npm

    npm install vee-validate --save
    

    yarn

    yarn add vee-validate
    

    CDN

    vee-validate is also available on these cdns:

    Getting Started

    In your script entry point:

    import Vue from 'vue';
    import VeeValidate from 'vee-validate';
     
    Vue.use(VeeValidate);

    Now you are all setup to use the plugin.

    Usage

    Just apply the v-validate directive on your input and pass a string value which is a list of validations separated by a pipe. For example, we will use the required and the email validators:

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

    Alternatively you can pass an object for more flexibility:

    <input v-validate="{ required: true, email: true, regex: /[0-9]+/ }" type="text" name="email">

    Now every time the input changes, the validator will run the list of validations from left to right, populating the errors helper object whenever an input fails validation.

    To access the errors object (in your vue instance):

    this.$validator.errorBag;
    // or
    this.errors; // injected into $data by the plugin, you can customize the property name.

    Let's display the error for the email input we've created:

    <!-- If it has an email error, display the first message associated with it. -->
    <span v-show="errors.has('email')">{{ errors.first('email') }}</span>

    Of course there is more to it than that. Refer to the documentation for more details about the rules and usage of this plugin.

    Documentation

    Read the documentation and demos.

    Compatibility

    This library uses ES6 Promises so be sure to provide a polyfill for it for the browsers that do not support it.

    Contributing

    You are welcome to contribute to this repo with anything you think is useful. Fixes are more than welcome. However if you are adding a new validation rule, it should have multiple uses or be as generic as possible.

    You can find more information in the contribution guide.

    Tutorials and Examples

    Credits

    license

    MIT

    Install

    npm i vee-validate-testable

    DownloadsWeekly Downloads

    2

    Version

    2.0.3

    License

    MIT

    Last publish

    Collaborators

    • williamdasilva