kdulidate

Simple, lightweight model-based validation for Kdu.js

Installation

npm install kdulidate --save

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

import Kdu from 'kdu'
import Kdulidate from 'kdulidate'
Kdu.use(Kdulidate)

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

import { validationMixin } from 'kdulidate'

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

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

<script src="kdulidate/dist/kdulidate.min.js"></script>
<!-- The builtin validators is added by adding the following line. -->
<script src="kdulidate/dist/validators.min.js"></script>

Kdu.use(window.kdulidate.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 'kdulidate/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
  }
}

License

MIT