{"id":22089665,"url":"https://github.com/q42/vue-dotnet-validator","last_synced_at":"2025-07-24T19:31:11.950Z","repository":{"id":45235940,"uuid":"58051887","full_name":"Q42/vue-dotnet-validator","owner":"Q42","description":"Client-side validator of .NET data-annotations using vue.js","archived":false,"fork":false,"pushed_at":"2023-01-07T02:19:53.000Z","size":1345,"stargazers_count":44,"open_issues_count":22,"forks_count":6,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-11-25T11:40:25.197Z","etag":null,"topics":["dotnet-core","javascript","validation","vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Q42.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-04T12:54:23.000Z","updated_at":"2022-03-26T01:01:46.000Z","dependencies_parsed_at":"2023-02-06T10:31:25.894Z","dependency_job_id":null,"html_url":"https://github.com/Q42/vue-dotnet-validator","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Q42%2Fvue-dotnet-validator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Q42%2Fvue-dotnet-validator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Q42%2Fvue-dotnet-validator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Q42%2Fvue-dotnet-validator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Q42","download_url":"https://codeload.github.com/Q42/vue-dotnet-validator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227470071,"owners_count":17778930,"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":["dotnet-core","javascript","validation","vue"],"created_at":"2024-12-01T02:13:45.518Z","updated_at":"2024-12-01T02:13:46.151Z","avatar_url":"https://github.com/Q42.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue dotnet validator\n\nA vuejs validator for .NET forms.\n\n## Build status\n\n[![CircleCI](https://circleci.com/gh/Q42/vue-dotnet-validator/tree/master.svg?style=svg)](https://circleci.com/gh/Q42/vue-dotnet-validator/tree/master)\n\n## Summary\n\nThis package makes it possible to use .NET model validation using vue.js instead of the default jQuery validator way that microsoft dictates.\nThe idea is that you use this on your server rendered HTML forms which include the data-attributes that are generated by C#'s razor template engine.\n\n## Requirements\n\nThis package (from version 0.3.0 and up) requires vue 2.x.\n\n## Installation\n\n`npm install vue-dotnet-validator`\n\n## Usage\n\nUsing this library requires changes on two places in your application, JavaScript and your razor cshtml templates.\n\n### JavaScript\n\nThis registers the vue components so that Vue.js knows what to activate.\nBase usage:\n\n```JavaScript\nimport { validatorGroup, validator } from 'vue-dotnet-validator';\n\nVue.component('validator-group', validatorGroup);\nVue.component('validator', validator());\n```\n\n### Cshtml\n\nThe following code should be added to your cshtml forms. This makes sure that the validator logic is activated and adds the required references to DOM-nodes.\n\n```HTML\n\u003cvalidator-group inline-template\u003e\n    \u003cform asp-controller=\"Account\" asp-action=\"Register\" method=\"post\" v-on:submit=\"validate\"\u003e\n        \u003cvalidator value=\"@Model.LastName\" inline-template\u003e\n           \u003cspan asp-validation-for=\"LastName\" ref=\"message\"\u003e\u003c/span\u003e\n           \u003cinput type=\"text\" asp-for=\"LastName\" ref=\"field\" v-model=\"val\" /\u003e\n        \u003c/validator\u003e\n        \u003cbutton type=\"submit\"\u003eRegister\u003c/button\u003e\n    \u003c/form\u003e\n\u003c/validator-group\u003e\n```\n\n#### Explanation of the cshtml changes:\n\n`\u003cvalidator-group inline-template\u003e`\n\nThis behaves as a container for the entire form, so we can maintain the state of the entire form and the validation status of the input fields in it.\n\n`v-on:submit=\"validate\"`\n\nThis adds an event listener to the `\u003cform\u003e` tag to make sure we prevent the default form submit event when fields are invalid.\n\n`\u003cvalidator value=\"@Model.LastName\" inline-template\u003e`\n\nThis adds a validator instance to the form. The `@Model.LastName` is the property of your model.\n\n`ref=\"message\"`\n\nThis adds a reference to the validation-message element. This makes sure the validation message is displayed at the correct position in the DOM.\n\n`ref=\"field\"`\n\nThis adds a reference to the input field, so the `\u003cvalidator\u003e` instance knows what element to watch.\n\n`v-model=\"val\"`\n\nThis adds the model binding in the `\u003cvalidator\u003e` instance.\n\n`validation-style=\"\"` (optional, default is `after-blur`), validation-styles:\n\n- `after-blur` (default): After first blur validation will be reactive.\n- `after-change`: After first change validation will be reactive, blurring an autofocus field with no input will not trigger this.\n- `after-submit`: After first submit validation will be reactive.\n\n`prioritize-extra-error-message`\n\nThis prioritizes the (optional) extra error messages over the normal validation messages.\n\n## Built-in validators\n\nThere are a couple of built-in validators you can use.\n\n### Required Validator\n\nTo validate if a value is not `null`, `undefined` or empty-string.\n\n### Is True Validator\n\nTo validate a value (for example a checkbox) is set to true.\n\n### Equal To Validator\n\nTo validate a value is equal to the value of another input-field based on it's name attribute.\n\n### Regex Validator\n\nTo validate a value complies to a regex.\n\n### Range Validator\n\nTo validate a numeric value is in a range between.\n\n### String-length Validator\n\nTo validate a string value length is in a range between.\n\n### Min-length Validator\n\nTo validate a string value has a minimum length.\n\n### Max-length Validator\n\nTo validate a string is not longer than a maximum length.\n\n## Creating custom validators\n\nIt is possible to create your own validators, below is an example of a very simple custom validator.\n\n### JavaScript\n\n```JavaScript\nimport { validator, BaseValidator } from 'vue-dotnet-validator';\n\nclass MyCustomValidator extends BaseValidator {\n    isValid(value) {\n        return !value || value == 'Hello';\n    }\n}\n\nconst validators = {\n  MyCustomValidator\n};\n\nVue.component('validator', validator(validators));\n```\n\n### Cshtml\n\nTo use this custom validator in your own form, make sure your custom .NET data annotation outputs a `data-val-mycustom=\"MESSAGE\"` attribute on your `\u003cinput\u003e` DOM node.\n\n## Custom validators with additional parameters\n\nYou can extend the features of your custom validators using additional data-attributes on your `\u003cinput\u003e` tag. This is a feature supported in .NET.\nFor an example on the usage of this feature, see `regexvalidator.js`.\n\n## Publish a new version\n\nMake sure you have publish rights at the Q42 organisation on NPM.\n\n```shell\nnpm version [major|minor|patch]\nnpm publish\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fq42%2Fvue-dotnet-validator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fq42%2Fvue-dotnet-validator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fq42%2Fvue-dotnet-validator/lists"}