{"id":13423994,"url":"https://github.com/sebastian-software/vuex-validator","last_synced_at":"2025-03-15T17:32:42.924Z","repository":{"id":57396941,"uuid":"58552561","full_name":"sebastian-software/vuex-validator","owner":"sebastian-software","description":"[UNMAINTAINED] Validator library for Vuex","archived":true,"fork":false,"pushed_at":"2017-08-29T11:49:15.000Z","size":68,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-22T22:08:41.710Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sebastian-software.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-11T14:32:28.000Z","updated_at":"2023-01-28T21:30:06.000Z","dependencies_parsed_at":"2022-09-26T17:00:58.254Z","dependency_job_id":null,"html_url":"https://github.com/sebastian-software/vuex-validator","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-software%2Fvuex-validator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-software%2Fvuex-validator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-software%2Fvuex-validator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-software%2Fvuex-validator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sebastian-software","download_url":"https://codeload.github.com/sebastian-software/vuex-validator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243767623,"owners_count":20344951,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:00:46.320Z","updated_at":"2025-03-15T17:32:42.603Z","avatar_url":"https://github.com/sebastian-software.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins"],"readme":"[unmaintained-url]: .github/ISSUE_TEMPLATE.md\n[unmaintained-image]: https://img.shields.io/badge/project-unmaintained-red.svg\n\n\u003cimg src=\"assets/vuejs.png\" alt=\"VueJS Logo\" width=\"200\" height=\"200\"/\u003e\n\n# Vuex Validator\u003cbr/\u003e[![Project unmaintained][unmaintained-image]][unmaintained-url] [![Sponsored by][sponsor-img]][sponsor] [![Version][npm-version-img]][npm] [![Downloads][npm-downloads-img]][npm] [![Build Status][ci-img]][ci] [![Dependencies][deps-img]][deps]\n\n[Vuex] Plugin for validation of store values.\n\n[sponsor-img]: https://img.shields.io/badge/Sponsored%20by-Sebastian%20Software-692446.svg\n[sponsor]: https://www.sebastian-software.de\n[Vuex]: https://github.com/vuejs/vuex\n[ci-img]:  https://travis-ci.org/sebastian-software/vuex-validator.svg\n[ci]:      https://travis-ci.org/sebastian-software/vuex-validator\n[deps]: https://david-dm.org/sebastian-software/vuex-validator\n[deps-img]: https://david-dm.org/sebastian-software/vuex-validator.svg\n[npm]: https://www.npmjs.com/package/vuex-validator\n[npm-downloads-img]: https://img.shields.io/npm/dm/vuex-validator.svg\n[npm-version-img]: https://img.shields.io/npm/v/vuex-validator.svg\n\n\n\n## Links\n\n- [GitHub](https://github.com/sebastian-software/vuex-validator)\n- [NPM](https://www.npmjs.com/package/vuex-validator)\n\n\n## Installation\n\nShould be installed locally in your project source code:\n\nInstallation via JSPM:\n\n```bash\njspm install npm:vuex-validator\n```\n\nAlternatively you can also use plain old NPM:\n\n```bash\nnpm install vuex-validator --save\n```\n\n## Integration\n\nIn your main application javascript file:\n\n````\n// app.js\n\nimport { VuexValidator } from \"vuex-validator\";\nimport validators from \"./vuex/validators\";\nimport store from \"./vuex/store\"; // Inside there should be a Vue.use(Vuex) (see Vuex documentation)\n\nVue.use(VuexValidator, {\n  validators\n})\n````\n\nYour validator configurator:\n\n````\n// ./vuex/validators\n\nimport testValidator from \"./validation/test\";\n\nconst validators = [ testValidator ];\n\nexport default validators;\n````\n\nA sample validator:\n\n````\n// ./vuex/validation/test.js\n\nimport { BaseValidator } from \"vuex-validator/lib/BaseValidator\";\n\nclass TestValidator extends BaseValidator {\n\tconstructor() {\n\t\tsuper(\"test\"); // Name of validation are, should correlate with Vuex store module\n\n\t\tthis.rule(\"test-name\", [\"test\", \"test2\"], this.testName); // Name of rule, All properties that are tested, Test function itself\n\t}\n\n\ttestName(state) { // State from Vuex\n\t\tif (typeof(state.test) !== \"number\") {\n\t\t\tthis.invalid([\"test\"], \"TEST_NOT_A_NUMBER\"); // Failed properties and technical error key as string\n\t\t}\n\n\t\tif (typeof(state.test2) !== \"string\") {\n\t\t\tthis.invalid([\"test2\"], \"TEST2_NOT_A_STRING\"); // Failed properties and technical error key as string\n\t\t}\n\n\t\tif (state.test \u003e 20 \u0026\u0026 state.test2 === \"low number\") {\n\t\t\tthis.invalid([\"test\", test2\"], \"TEST_IS_NO_LOW_NUMBER\"); // Failed properties and technical error key as string\n\t\t}\n\n\t\treturn this.errors(); // Return null if no errors, otherwise array of errors\n\t}\n}\n\nexport default new TestValidator();\n````\n\nA sample state for this could be:\n\n````\n{\n\t\"test\": 123,\n\t\"test2\": \"a string\"\n}\n````\n\n## Usage\n\nThere are two ways to use this validation.\n\n### Active validation\n\nTo actively validate values you can call\n\n````\nstore.$validator.isValid(\"test-name\")\n````\n\nThis 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\nconnection middleware before sending data.\n\n### Validation getter in components\n\nValidation getters are added to a component's option object with key `validators`. This bears\nanalogy to Vuex getters itself mapping global state to component's local state.\n\n````\nexport default Vue.extend({\n\t...\n\n\tvalidators: {\n\t\ttestInvalid: (validator) =\u003e validator.isInvalid(\"test\"),\n\t\ttest2Invalid: (validator) =\u003e validator.isInvalid(\"test2\")\n\t}\n});\n````\n\nisInvalid takes a property path as string. This is either the property name itself or module name and property name seperated via dot.\n\n````\n\"\u003cproperty name\u003e\"\n\"\u003cmodule name\u003e.\u003cproperty name\u003e\"\n````\n\nAll validator functions are mapped to the component's local computed getters. So it is possible to access validation properties in template:\n\n````\nMy property {{test}} is invalid: {{testInvalid}}\n````\n\nA 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:\n\n````\n[{\n\terror: \"TEST_IS_NO_LOW_NUMBER\",\n\tfields: [\"test\", \"test2\"],\n\tvalid: false\n}]\n````\n\n`fields` is an array of properties that are tested against in the failing rule. `error`\nis the technical error key defined.\n\n## Copyright\n\n\u003cimg src=\"assets/sebastiansoftware.png\" alt=\"Sebastian Software GmbH Logo\" width=\"250\" height=\"200\"/\u003e\n\nCopyright 2015-2016\u003cbr/\u003e[Sebastian Software GmbH](http://www.sebastian-software.de)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastian-software%2Fvuex-validator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebastian-software%2Fvuex-validator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastian-software%2Fvuex-validator/lists"}