Simple, lightweight model-based validation for Vue.js

Last update: Jun 25, 2022

vuelidate

codecov gzip size

Simple, lightweight model-based validation for Vue.js

Sponsors

Gold

Vuejs Amsterdam

Vue - The Road To Enterprise

Silver

Storyblok

Bronze

Vue Mastery logo Vue Mastery logo

Features & characteristics:

  • Model based
  • Decoupled from templates
  • Dependency free, minimalistic library
  • Support for collection validations
  • Support for nested models
  • Contextified validators
  • Easy to use with custom validators (e.g. Moment.js)
  • Support for function composition
  • Validates different data sources: Vuex getters, computed values, etc.

Demo & docs

https://vuelidate.js.org/

Vue 3 support

Vue 3 support is almost here with the Vuelidate 2 rewrite. Check out the next branch to see the latest progress.

Installation

npm install vuelidate --save

You can import the library and use as a Vue plugin to enable the functionality globally on all components containing validation configuration.

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Alternatively it is possible to import a mixin directly to components in which it will be used.

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({
  mixins: [validationMixin],
  validations: { ... }
})

The browser-ready bundle is also provided in the package.

<script src="vuelidate/dist/vuelidate.min.js">script>

<script src="vuelidate/dist/validators.min.js">script>
Vue.use(window.vuelidate.default)

Basic usage

For each value you want to validate, you have to create a key inside validations options. You can specify when input becomes dirty by using appropriate event on your input box.

import { required, minLength, between } from 'vuelidate/lib/validators'

export default {
  data () {
    return {
      name: '',
      age: 0
    }
  },
  validations: {
    name: {
      required,
      minLength: minLength(4)
    },
    age: {
      between: between(20, 30)
    }
  }
}

This will result in a validation object:

$v: {
  name: {
    "required": false,
    "minLength": false,
    "$invalid": true,
    "$dirty": false,
    "$error": false,
    "$pending": false
  },
  age: {
    "between": false
    "$invalid": true,
    "$dirty": false,
    "$error": false,
    "$pending": false
  }
}

Checkout the docs for more examples: https://vuelidate.js.org/

Contributing

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# create UMD bundle.
npm run build

# Create docs inside /gh-pages ready to be published
npm run docs

# run unit tests
npm run unit

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Contributors

Current

Damian Dulisz
Damian Dulisz
Natalia Tepluhina
Natalia Tepluhina
Natalia Tepluhina
Dobromir Hristov
Marina Mosti
Marina Mosti

Emeriti

Here we honor past contributors who have been a major part on this project.

License

MIT

GitHub

https://github.com/vuelidate/vuelidate
Comments
  • 1. @types/vuelidate

    Provide types as inspired by #175.

    Main types:

    • Vuelidate = PluginFunction for Vue.use(Vuelidate)
    • ComponentOptions.validations
    • Vue.$v

    Some of the predefined predicates are covered, may be not all.

    Reviewed by janesser at 2018-05-12 20:27
  • 2. $v is not defined in single file component

    I'm trying to use the vuelidate plugin with my vue-router-enabled web app. I keep getting the following error:

    [Vue-warn]: Property or method "$v" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option

    This is my bootstrap file for reference:

    `import Vue from 'vue' import Resource from 'vue-resource' import App from "./components/App.vue" import router from "./router/appRouter.js" import store from "./store/appStore.js"

    Vue.use(Resource); Vue.use(Vuelidate);

    const app = new Vue({ el: '#app', router, store, render: (h) => h(App) }) `

    I'm using the plugin with the following code in component file:

    <template>
    <div>
        <div :class="'input-group ' + {'form-group-error': $v.email.$error }"> 
        <p class="label"> Email </p>
        <input type="text" id="email" v-model="models.email" @input="$v.email.$touch">
        </div>
    </div>
    </template>
    
    <script>
        const { required, minLength, alpha, email, numeric } = require("vuelidate/lib/validators");
        export default 
        {
            data(){...},
            methods:{...},
            etc
        }
    <script>
    

    I can't figure out how to reference $v in my code to allow the vue instance to access it. Sorry in advance if I'm missing something blindingly obvious but I've stuck on this for a while

    Thanks

    Reviewed by shiningshisa at 2017-03-17 13:19
  • 3. Validator 'numeric' only accepts positive integers

    The name of the validator implies it is looking for any numeric value, including decimal and negative values. The current implementation only accepts positive integers. Either the accepted validation text should be broadened or this validator should be renamed.

    Example: https://jsfiddle.net/gregpeden/hmcLdc5a/

    I could provide a PR for this (fix this + provide actual integer test) if there is interest in changing it.

    Reviewed by GregPeden at 2017-04-27 08:19
  • 4. version of $dirty that is true if any children have been changed

    I would also like to have a value that is similar to $dirty with the difference being that it is true if any (rather than all) of the children are $dirty. The purpose to make it easy to track if there have been any changes in the overall form or a specific section of the form - e.g. certain actions will be available if even only one value has changed.

    I am just not sure how best to do this. I understand that $dirty is a computed value, so preferably I would like to add a complementary computed value to $dirty (e.g. $anydirty) to be access in a similar manner to the $dirty value. If anyone in the know has some guidance on the best way to achieve this it would be greatly appreciated.

    Reviewed by michaelsorich at 2017-02-26 04:34
  • 5. Vuelidate does not work with vue 3

    An Error occurs as soon as I uncomment the following line:

    function useApplicationPluginsAndComponents (Application) { // Application.use(VueCompositionAPI) // causing error Application.use(router) Application.use(store) registerGlobalComponents(Application) return Application }

    Uncaught Error: [vue-composition-api] only works with Vue 2, v3.0.0-rc.3 found.

    Does vuelidate work with vue3?

    Reviewed by tomisicm at 2020-07-26 17:31
  • 6. Collection not required, but if present, subfield required

    Is it possible to define a rule where a collection is not required, but if it exists (eg a user chooses to add an item to the collection) then subfield(s) are required?

    I tried setting up a rule like this but got "TypeError: Cannot convert undefined or null to object" in console when the collection did not exist on certain records.

    Reviewed by Youdaman at 2017-03-27 10:02
  • 7. Vite Vue TS intellisense error: Argument of type 'ComputedRef<>' is not assignable to parameter of type 'ValidationArgs<>'

    Describe the bug I'm trying out vuelidate 2 alpha with typescript and vite, and there seems to be an issue with the typescript linter complaining about the types ComputedRef<{}> and ValidationArgs<{}>. I was following the instructions provided in making vuelidate rules, and I don't know why there's an error with typescript regarding the manner. Is there some sort of thing that I should've done that I don't know about? Like some sort of typecasting?

    Reproduction URL I apologise if I wasn't able to use the provided codesandbox templates provided, since the issue is on vite and not on vue-cli. Provided here is the URL of the code. The issue cannot be seen through codesandbox, and it will only be visible if you check the typescript linting on vscode itself. The file and line in question is on ./src/components/FormComposition.vue on ln 32.

    To Reproduce Steps to reproduce the behavior:

    1. Create a new vite project using the terminal using the vue-ts template: yarn create vite --template vue-ts vuelidate-issue-test.
    2. Open the project on VS Code.
    3. Open the VS Code inbuilt terminal and run yarn to initialise the project.
    4. Install vuelidate/core and vuelidate/validators onto the project: yarn add @vuelidate/core @vuelidate/validators.
    5. Create a new vue file component called Form.vue in src/components folder.
    6. Copy the code written below.
    // Form.vue
    
    <script lang="ts" setup>
    import { useVuelidate } from "@vuelidate/core";
    import { required, email, minLength, sameAs } from "@vuelidate/validators";
    import { reactive, computed } from "vue";
    
    const state = reactive({
      email: "",
      password: {
        pass: "",
        confirm: "",
      },
    });
    
    const rules = computed(() => {
      return {
        email: { required, email },
        password: {
          pass: { required, minLength: minLength(6) },
          confirm: { required, sameAs: sameAs(state.password.pass) },
        },
      };
    });
    
    // const rules = {
    //   email: { required, email },
    //   password: {
    //     pass: { required, minLength: minLength(6) },
    //     confirm: { required, sameAs: sameAs(state.password.pass) },
    //   },
    // };
    
    const v$ = useVuelidate(rules, state);
    
    const submitForm = () => {
      // vuelidate validation
      v$.value.$validate();
    
      // if success
      if (!v$.value.$error) {
        alert("Form Successfully Submitted!");
      }
      // // if fail
      // else {
      //   alert(
      //     "I'm sorry, you seem to not have filled all inputs. Please fill them up and try again."
      //   );
      // }
    };
    </script>
    
    <template>
      <div class="root">
        <h2>Create an Account</h2>
        <p>
          <input type="text" v-model="state.email" placeholder="Email" />
          <span v-if="v$.email.$error">
            {{ v$.email.$errors[0].$message }}
          </span>
        </p>
        <p>
          <input
            type="password"
            v-model="state.password.pass"
            placeholder="Password"
          />
          <span v-if="v$.password.pass.$error">
            {{ v$.password.pass.$errors[0].$message }}
          </span>
        </p>
        <p>
          <input
            type="password"
            v-model="state.password.confirm"
            placeholder="Confirm Password"
          />
          <span v-if="v$.password.confirm.$error">
            {{ v$.password.confirm.$errors[0].$message }}
          </span>
        </p>
        <button @click="submitForm">Submit</button>
      </div>
    </template>
    
    1. Go back to the App.vue file, and update the file as is:
    // App.vue
    
        <script setup lang="ts">
    -    // This starter template is using Vue 3 <script setup> SFCs
    -    // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
    -    import HelloWorld from './components/HelloWorld.vue'
    +    import Form from './components/Form.vue'
        </script>
        
        <template>
    -      <img alt="Vue logo" src="./assets/logo.png" />
    -      <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
    +      <Form />
        </template>
    
        <style>
        #app {
          font-family: Avenir, Helvetica, Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-align: center;
          color: #2c3e50;
          margin-top: 60px;
        }
        </style>
    
    1. Run the development server using yarn dev.

    Expected behavior There are no errors when running it in the development server, but the only issue is that the typescript linter is complaining about incompatible types.

    Screenshots where the typescript error shows up

    Additional context I was following a tutorial by LearnVue, and when I reached the section where the tutorial is converting the code from the options api to the composition api, and I stumbled upon on how to initialise the useVuelidate() method. When I tried doing it myself, the typescript lint `Argument of type 'ComputedRef<{email: required...}>' is not assignable to parameter of type 'ValidationArgs<{email: string;...}>'.

    Reviewed by cindrmon at 2022-03-14 02:44
  • 8. Validation status is sometimes not evaluated in 0.4.1

    https://jsfiddle.net/gLg17z9o/

    Try to click Validate => it turns to red. Now try to fill field - validation stays red.

    Fill field => it turns green. Clear field => it stays green.

    Replace

    {{$v.form.password.$error}}
    with
    {{$v.form.password}}
    Now everything works as expected.

    Reviewed by pdanpdan at 2017-03-22 09:53
  • 9. Vue 2.6 + Composition API + Vuelidate

    Hey, I'm trying to use the next branch with Vue 2.6 and Composition API (in quasar framework), but it doesn't work, I got the following error :

    TypeError: Object(...) is not a function
        at useVuelidate (index.esm.js?dc83:580)
        at useRegisterForm (use-register-form.ts?f336:57)
    

    Quasar Framework is not yet shipped with Vue 3, so I tried the old version of Vuelidate, I export the validations object in the setup function but I think it has no effect as I can't find the $v object.

    import { reactive, toRefs, defineComponent } from '@vue/composition-api'
    import { api } from 'boot/axios'
    import {
      required,
      email,
      minLength,
      sameAs
    } from 'vuelidate/lib/validators'
    
    type Selected = {
      label: string,
      value: string | number
    }
    
    export default function useRegisterForm () {
      const state = reactive({
        lastName: '',
        firstName: '',
        email: '',
        address: '',
        password: '',
        passwordConfirmation: '',
        terms: false,
        dialCode: 0,
        zipCode: null,
        mobile: '',
        countries: [] as Array<Selected>,
        country: {
          label: null,
          value: null,
          iso: null,
          dial_code: null
        },
        states: [] as Array<Selected>,
        state: {
          label: null,
          value: null
        },
        cities: [] as Array<Selected>,
        city: {
          label: null,
          value: null
        }
      })
    
      const validations = {
        email: {
          required,
          email
        }
      }
    
      // METHODS
      async function onSubmit (): Promise<void> {
        try {
          const { data } = await api.post<Array<Record<string, any>>>('/register', {
            last_name: state.lastName,
            first_name: state.firstName,
            email: state.email,
            mobile: `+${state.dialCode}${state.mobile.replace(/\s/g, '')}`,
            country: state.country.value,
            state: state.state.value,
            city: state.city.value,
            address: state.address,
            zip_code: state.zipCode,
            password: state.password,
            password_confirmation: state.passwordConfirmation,
            terms: state.terms
          })
        } catch (e) {
        }
      }
    
      return {
        state,
        onSubmit,
        validations
      }
    }
    
    export default defineComponent({
        name: 'Register',
        setup (props, context) {
            const { state, onSubmit, validations } = useRegisterForm()
    
            return {
               ...toRefs(state as any),
               validations
          }
       }
    })
    

    I have no JS error. Any idea please?

    Reviewed by Melchyore at 2020-08-15 15:07
  • 10. Message Params

    name: {
      required,
      minLength: minLength(6)
      maxLength: withMessage(maxLength, 10)
    }
    
    function withMessage (rule, ...args) {
      const wrapRule = rule(...args)
      wrapRule.messageParams = () => args
      return wrapRule
    }
    
    function required (x) {
      return !!x
    }
    
    required.messageParams (x) {
      return
    }
    
    Reviewed by shentao at 2016-11-10 15:55
  • 11. Is there a way to programmatically force an error?

    Hi,

    First, great library, love it. Also great idea to provide a base fiddle, that's awesome 👍

    I'm trying to do something which is either not possible, or I'm not aware of how to do it.

    I'm hoping you can either guide me or confirm if it's not possible.

    Basically I would need to be able to programmatically set some validation errors based on some reply from the server.

    It's not the documented case of an async validation of a single field, I'm submitting the whole form data and need to highlight some of the field errors based on the server logic applied.

    For example, image a credit card processing. If the credit card payment fails, i'd like to highlight the fields with particular validation error status (it's not precisely my case but similar).

    The problem I'm running into is that the error status booleans are apparently just getters, so if I try to force them, I get told off.

    See this jsfiddle based on the sample you provided (again, great idea!)

    https://jsfiddle.net/doginthehat/qc343jrd/

    The result is: "Error: TypeError: Cannot set property required of #<Object> which has only a getter"

    Is there a way to do this?

    Reviewed by doginthehat at 2017-04-12 05:59
  • 12. Please update vue-demi dependency to 0.13.x for Vue 2.7 support

    Vue 2.7 have composition API integrated in the package, but vuelidate require @vue/composition-api, now i need to keep both for properly work and have some side effects from that.

    Reviewed by maximas31 at 2022-07-01 08:59
  • 13. Will there be a production version of vuelidate ? (current is alpha version)

    I was asked to make sure all project dependencies are stable version, but I found vuelidate has been alpha version since 3 years ago. Would there be a production version of vuelidate? Any schedule for it? I will appreciate your help with this situation.

    Reviewed by hkk2018 at 2022-07-01 03:12
  • 14. Trouble with $each in test vue-test-utils + jest

    I have parent and child components, parent render child component with v-for from array and I'm pass to child index for current object and validate object. It's works fine but in test I have error I think in $each.

    PARENT

    <template>
      <div class="upload-images">
        <div class="gallery-container">
          <div class="areas-upload" v-for="(item, index) in materialFiles">
            
            <UploadPreview
                :validate="validate"
                :item="item"
                :index="index"
                :rules-preview="rulesPreview"
                :material-files="materialFiles"
                @showPreloader="() => $emit('showPreloader')"
                @hidePreloader="() => $emit('hidePreloader')"
                @addPreview="(data, i) => $emit('addPreview', data, i)"
                @removePreview="(curObj) => $emit('removePreview', curObj)"
            />
            
          </div>
        </div>
      </div>
    </template>
    
    validations:{
        materialFiles: {
          $each: {
            files: {
              preview: {
                originalFileName: {
                  required
                }
              }
            }
          }
        },
      },
    

    CHILD

    <template>
      <div class="preview-container">
        <div class="preview-upload" :class="{ 'form-group--error': validate.materialFiles.$each[index].files.preview.originalFileName.$error }">
          <div class="upload-files">
            <div class="loaded-files"></div>
            <div class="upload-wrap wrap-flex" :class="{'hide': item.files.preview.filePath}">
              <div v-if="!item.files.preview.filePath" class="area-upload" style="display: flex;">
                <input type="file" :id="'preview-upload' + index" @change="attachPreview($event, item)" class="inputfile" name="fileselect[]" accept=".png, .jpg">
                <label :for="'preview-upload' + index">Choose</label>
              </div>
              <div v-if="item.files.preview.filePath" class="image-preview">
                <img :src="item.files.preview.filePath" alt="">
                <div class="btn-group">
                  <div class="input-group">
                    <input type="file" :id="'attach-new-preview' + index" @change="attachPreview($event, item)" class="attach-preview" name="fileselect[]" accept=".png, .jpg"/>
                    <label :for="'attach-new-preview' + index">Upload</label>
                  </div>
                  <button @click.prevent="removePreview($event, item)" class="remove-preview">Remove</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    props:{
        validate:{
          type: Object,
          required: true
        },
        item:{
          type: Object,
          required: true
        },
        index:{
          type: Number,
          required: true
        },
        rulesPreview:{
          type: Object,
          required: true
        },
        materialFiles:{
          type: Array,
        },
      },
    

    TEST

    import {createLocalVue, mount} from "@vue/test-utils"
    import UploadPreview from '../../assets/components/UploadPreview'
    import Vuelidate from 'vuelidate'
    import {required, requiredUnless} from "vuelidate/lib/validators";
    
    const localVue = createLocalVue()
    localVue.use(Vuelidate)
    
    describe('testing component UploadPreview', () => {
        let wrapper
        beforeEach(() => {
            wrapper = mount(UploadPreview,
                {
                    localVue,
                    propsData: {
                        item: {
                            "lang": "uk",
                            "files": {
                                "preview": {
                                    "@id": "/api/material_files/af2f1686-f2d7-4d9b-9a23-e9947aecea9b",
                                    "@type": "http://schema.org/MediaObject",
                                    "id": "af2f1686-f2d7-4d9b-9a23-e9947aecea9b",
                                    "originalFileName": "unnamed.png",
                                    "fileName": "aaf37a497bed7faba3fcde12cf46766a.png",
                                    "filePath": "path",
                                    "position": 0,
                                    "type": "preview",
                                    "lang": "uk",
                                    "updatedAt": "2022-05-16T08:06:44+00:00"
                                },
                            }
                        },
                        index: 0,
                        rulesPreview: {},
                        materialFiles: [
                            {
                                lang: "uk",
                                files: {
                                    "preview": {
                                        "@id": "/api/material_files/af2f1686-f2d7-4d9b-9a23-e9947aecea9b",
                                        "@type": "http://schema.org/MediaObject",
                                        "id": "af2f1686-f2d7-4d9b-9a23-e9947aecea9b",
                                        "originalFileName": "unnamed.png",
                                        "fileName": "aaf37a497bed7faba3fcde12cf46766a.png",
                                        "filePath": "path",
                                        "position": 0,
                                        "type": "preview",
                                        "lang": "uk",
                                        "updatedAt": "2022-05-16T08:06:44+00:00"
                                    },
                                }
                            },
                            {
                                lang: "en",
                                files: {
                                    "preview": {
                                        "@id": "/api/material_files/3a1a5195-02a0-4e4f-8bb1-a48ebb96c0ff",
                                        "@type": "http://schema.org/MediaObject",
                                        "id": "3a1a5195-02a0-4e4f-8bb1-a48ebb96c0ff",
                                        "originalFileName": "ФЛАГ 1.png",
                                        "fileName": "bffe001fb860e11a562ef3eb98da5246.png",
                                        "filePath": "path",
                                        "position": 0,
                                        "type": "preview",
                                        "lang": "en",
                                        "updatedAt": "2022-06-29T17:59:01+00:00"
                                    },
                                }
                            }
                        ],
                        validate: {
                            materialFiles: {
                                $each: {
                                    files: {
                                        preview: {
                                            originalFileName: {
                                                required
                                            }
                                        }
                                    }
                                }
                            },
                        }
                    },
                })
        })
        test('test emmit itemSelectedListener', async () => {
            console.log('!!!!')
        })
    })
    

    Problem in :class="{ 'form-group--error': validate.materialFiles.$each[index].files.preview.originalFileName.$error }" TypeError: Cannot read property 'files' of undefined

    Reviewed by fisherspoons at 2022-06-30 09:03
  • 15. Error handling and improved typescript support for useVuelidate function

    Is your feature request related to a problem? Please describe. One time I lost a lot of time because I used the useVuelidate function the wrong way. I mixed up the order of rules and state. What made it worst was that having a state object which is initialized with empty string, e.g. const state = {firstName: "", lastName: ""} didn't result in an error being thrown. Only when I changed the empty strings to other values an error occured.

    That error however, didn't let me understand the root of the problem (state and rules being switched).

    This problem occured in a typescript project, thus it would be great if an error would have been shown right away in my IDE.

    Describe the solution you'd like

    • A typescript project would show an error in the IDE when rules and state are switched
    • a descriptive error is thrown when rules or state don't fullfil the required structure (for example because being switched)

    Describe alternatives you've considered

    Additional context Here screenshots of the errors I get in the browser. Screenshot 2022-06-22 at 19 20 43 Screenshot 2022-06-22 at 19 20 26

    Reviewed by derdem at 2022-06-22 17:23
  • 16. How to validate server errors for the collections?

    Make sure that you are familiar with documentation before submitting an issue.

    https://vuelidate-next.netlify.com/

    Describe the bug when I set the $externalResults errors for the object fields - it works fine. But when I set the errors for the collections (arrays) it's setting the path incorrectly.

    To Reproduce

    const form = {
        dogs: [
            age: 1000,
        ],
        [
            age: 3,
        ],
    }
    
    const rules = {
        dogs: {
            $each: helpers.forEach({
                age: { numeric },
            }),
        }
    }
    
    const $externalResults = ref({});
    const $v = useVuelidate(rules, form, { $externalResults });
    
    
    // After validation
    
    $externalResults.value = {
        dogs: [
            {
                age: ["Dogs can't live 1000 years"],
            },
        ],
    }
    
    

    But in the $v validation object under $v.dogs.$each.$response.$errors[0].age it's an empty array. Even though I see errors at $v.$errors[0].$message.age

    Reviewed by garf at 2022-06-22 15:57
  • 17. forEach helper makes new entries to the collection dirty

    Using the sample code given in the docs for forEach:

    <template>
      <div
        v-for="(input, index) in state.collection"
        :key="index"
        :class="{
            error: v$.collection.$each.$response.$errors[index].name.length,
          }"
      >
        <input v-model="input.name" type="text" />
        <div
          v-for="error in v$.collection.$each.$response.$errors[index].name"
          :key="error"
        >
          {{ error.$message }}
        </div>
      </div>
    </template>
    <script>
    // setup in a component
    import { helpers, required } from '@vuelidate/validators'
    import useVuelidate from '@vuelidate/core'
    import { reactive } from 'vue'
    
    export default {
      setup () {
        const rules = {
          collection: {
            $each: helpers.forEach({
              name: {
                required
              }
            })
          }
        }
        const state = reactive({
          collection: [
            { name: '' }, { name: 'bar' }
          ]
        })
        const v = useVuelidate(rules, state)
        return { v, state }
      }
    }
    
    </script>
    

    If I call $touch on collection, and then a new element is added to the collection, it'll be dirty as soon as it's added. I would expect that the existing elements would be dirty, and the new ones wouldn't. That way, errors wouldn't be displayed immediately and would instead require the user to interact with the element, as it's intended.

    For example, this sample from an older version of vuelidate does just that: https://vuelidate.js.org/#sub-collections-validation

    How do I get this behavior in the current version?

    Reviewed by samul-1 at 2022-06-21 23:54
Simple, lightweight, isomorphic, and template-based validation library.

Simple, lightweight, isomorphic, template-based validation.

Dec 9, 2021
Vue data validation rules, very much inspired from Laravel validation

A Vue plugin that provides out-of-the-box data validation rules, very much inspired from Laravel validation system. Installation npm i @primitivesocia

Apr 13, 2022
Vue props validation logic extracted for nested validation in object and arrays.

vue-props-validation Vue props validation logic extracted for nested validation in object and arrays. Install npm install vue-props-validation Usage Y

Feb 28, 2022
Form Validation in Vue3 with TypeScript along with vuelidate for the validation

Vue3 with typescript Form Validation in Vue3 with vuelidate library Node Version Used: v14.17.3 Library Used for the validation: Vuelidate 2 Demo Link

May 21, 2022
Sirius Validation - stand-alone JS library for data validation in Node and browsers.

SiriusJS Validation Sirius Validation is stand-alone JS library for data validation in Node and browsers. It offers: 23 build-in validation rules. The

Mar 24, 2020
Model forms as an immutable data tree with validators and an explicit dirty/pristine state

Model your form as an immutable data tree with validators and an explicit dirty/pristine state.

Feb 14, 2022
Vee-validate: a template-based validation framework for Vue.js that allows you to validate inputs and display errors.

vee-validate is a template-based validation framework for Vue.js that allows you to validate inputs and display errors. Being template-based you only

Feb 28, 2020
✔ Template Based Validation Framework for Vue.js

vee-validate is a template-based validation framework for Vue.js that allows you to validate inputs and display errors.

Sep 1, 2019
Simple package to display error in vue from laravel validation

Laravel Vue Validator By bubbleflat.com This package allow to display errors from laravel validation rules ! This package needs vue-resource to work !

Sep 20, 2020
A simple way to handle Laravel back-end validation in Vue 2.
A simple way to handle Laravel back-end validation in Vue 2.

vform A simple way to handle Laravel back-end validation in Vue. Inspired from Laravel Spark. Installation npm i axios vform Usage See the included ex

Jul 1, 2022
Simple Vue.js form validation library

Simple Vue.js form validation library

Mar 1, 2020
A simple vue component that can wrap forms with validation and submit functionality.

vue form component A simple vue component that can wrap forms with validation and submit functionality. installation Using npm: $ npm i -save-dev vue-

Sep 18, 2019
Simple and easy Vue directive for form validation.
Simple and easy Vue directive for form validation.

Simple and easy Vue.js directive for form validation.

Feb 15, 2021
Deadly simple form validation for Vue.js

vue-form-validator Deadly simple form validation for Vue.js. Features: Built in data types, including email, number, domain, url, etc. Customizable va

Aug 28, 2018
Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data

Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data. #install npm i vue-laravel-validator -

May 29, 2021
simple, powerful, vuejs validation.

Vuelidation ✅ simple, powerful, vuejs validation. ✨ Example ✨ Install yarn add --dev [email protected] Include Plugin import Vue from 'vue'; import V

Jan 3, 2022
Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

May 7, 2019
✅ Form Validation for Vue.js
✅  Form Validation for Vue.js

vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or u

Jul 4, 2022
RawModel.js plugin for Vue.js v2. Form validation has never been easier!

vue-rawmodel RawModel.js plugin for Vue.js v2. Form validation has never been easier! This plugin integrates RawModel.js framework into your Vue.js ap

Feb 3, 2022