Vuex Validator

Vuex Plugin for validation of store values.

Installation

Should be installed locally in your project source code:

Installation via JSPM:

jspm install npm:vuex-validator

Alternatively you can also use plain old NPM:

npm install vuex-validator --save

Integration

In your main application javascript file:

// app.js

import { VuexValidator } from "vuex-validator";
import validators from "./vuex/validators";
import store from "./vuex/store"; // Inside there should be a Vue.use(Vuex) (see Vuex documentation)

Vue.use(VuexValidator, {
  validators
})

Your validator configurator:

// ./vuex/validators

import testValidator from "./validation/test";

const validators = [ testValidator ];

export default validators;

A sample validator:

// ./vuex/validation/test.js

import { BaseValidator } from "vuex-validator/lib/BaseValidator";

class TestValidator extends BaseValidator {
	constructor() {
		super("test"); // Name of validation are, should correlate with Vuex store module

		this.rule("test-name", ["test", "test2"], this.testName); // Name of rule, All properties that are tested, Test function itself
	}

	testName(state) { // State from Vuex
		if (typeof(state.test) !== "number") {
			this.invalid(["test"], "TEST_NOT_A_NUMBER"); // Failed properties and technical error key as string
		}

		if (typeof(state.test2) !== "string") {
			this.invalid(["test2"], "TEST2_NOT_A_STRING"); // Failed properties and technical error key as string
		}

		if (state.test > 20 && state.test2 === "low number") {
			this.invalid(["test", test2"], "TEST_IS_NO_LOW_NUMBER"); // Failed properties and technical error key as string
		}

		return this.errors(); // Return null if no errors, otherwise array of errors
	}
}

export default new TestValidator();

A sample state for this could be:

{
	"test": 123,
	"test2": "a string"
}

Usage

There are two ways to use this validation.

Active validation

To actively validate values you can call

store.$validator.isValid("test-name")

This validates all values of Validator named test-name. It returnes true if all values are valid as defined by your rules in validator test-name. This could be used for backend connection middleware before sending data.

Validation getter in components

Validation getters are added to a component's option object with key validators. This bears analogy to Vuex getters itself mapping global state to component's local state.

export default Vue.extend({
	...

	validators: {
		testInvalid: (validator) => validator.isInvalid("test"),
		test2Invalid: (validator) => validator.isInvalid("test2")
	}
});

isInvalid takes a property path as string. This is either the property name itself or module name and property name seperated via dot.

"<property name>"
"<module name>.<property name>"

All validator functions are mapped to the component's local computed getters. So it is possible to access validation properties in template:

My property {{test}} is invalid: {{testInvalid}}

A falsy value (undefined, null or false) is returend in case of the property validated through all rules. Otherwise an array of failing rules return values are returned. the return structure can be something like:

[{
	error: "TEST_IS_NO_LOW_NUMBER",
	fields: ["test", "test2"],
	valid: false
}]

fields is an array of properties that are tested against in the failing rule. error is the technical error key defined.

sebastian-software/vuex-validator