{"id":21524893,"url":"https://github.com/degjs/formvalidation-minmaxlength","last_synced_at":"2025-10-06T21:11:47.293Z","repository":{"id":22444485,"uuid":"96266121","full_name":"DEGJS/formValidation-minMaxLength","owner":"DEGJS","description":"A minlength/maxlength rule for the DEGJS formValidation module.","archived":false,"fork":false,"pushed_at":"2023-01-03T15:14:38.000Z","size":1405,"stargazers_count":0,"open_issues_count":10,"forks_count":0,"subscribers_count":11,"default_branch":"main","last_synced_at":"2024-04-14T01:00:44.718Z","etag":null,"topics":["forms"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DEGJS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-05T01:52:48.000Z","updated_at":"2021-01-25T21:26:10.000Z","dependencies_parsed_at":"2023-01-11T21:37:44.733Z","dependency_job_id":null,"html_url":"https://github.com/DEGJS/formValidation-minMaxLength","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FformValidation-minMaxLength","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FformValidation-minMaxLength/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FformValidation-minMaxLength/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FformValidation-minMaxLength/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DEGJS","download_url":"https://codeload.github.com/DEGJS/formValidation-minMaxLength/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244085010,"owners_count":20395523,"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":["forms"],"created_at":"2024-11-24T01:30:22.192Z","updated_at":"2025-10-06T21:11:42.260Z","avatar_url":"https://github.com/DEGJS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# formValidation-minMaxLength\n![Run Tests](https://github.com/DEGJS/formValidation-minMaxLength/workflows/Run%20Tests/badge.svg)\n\nA minlength/maxlength rule module for the DEGJS [formValidation](https://github.com/DEGJS/formValidation) module.\n\n\n## Install\nformValidation-minMaxLength is an ES6 module. Consequently, you'll need an ES6 transpiler ([Babel](https://babeljs.io) is a nice one) as part of your Javascript workflow.\n\nIf you're already using NPM for your project, you can install formValidation-minMaxLength with the following command:\n\n```\n$ npm install @degjs/form-validation-min-max-length\n```\n\n## Usage\nAfter importing, formValidation rule modules can be instantiated by passing an array of names into a formValidation options object:\n\n```js\nimport formValidation from \"@degjs/form-validation\";\n\n/* Import the MinMaxLength rule module */\nimport minMaxLength from \"@degjs/form-validation-min-max-length\";\n\nconst validationOptions = {\n    rules: [\n        minMaxLength\n    ]\n};\n\n/* Instantiate the formValidation module on an element */\nconst formElement = document.querySelector('.form');\nconst validationInst = formValidation(formElement, validationOptions);\n```\n\nOptionally, default rule settings can be overridden by instantiating the rule as a function and passing options as an object: \n```js\nconst validationOptions = {\n    rules: [\n        minMaxLength({\n            message: 'Please enter between [minToken] and [maxToken] characters.',\n            events: [\n                'focusout',\n                'submit'\n            ]\n        })\n    ]\n};\n```\n\nformValidation-minMaxLength builds upon the HTML5 `maxlength` validation pattern, and also adds a custom `data-minlength` attribute for extending native functionality. Therefore, after instantiating the rule module, a field in the validation instance will be tested by this rule simply by setting the `data-minlength` and `maxlength` of a field's input.\n\nThis rule module contains its own default validation message. However, this message can be overridden by adding a data attribute at the field or form level (in that order of importance).\n\nBecause we may want to customize the validation message based on messages set on DOM elements, this module also makes use of token values that can be set in the rule's settings, or customized via a callback function.\n\nSample Markup:\n```html\n\u003cform class=\"form\" data-validation-minmaxlength-message=\"This message will override the default rule message, and only use [minToken].\"\u003e\n    \u003cfieldset\u003e\n        \u003cdiv class=\"js-validation-field\" data-validation-minmaxlength-message=\"This message will override both the default rule message and the form element message, and only use [maxToken].\"\u003e\n            \u003clabel for=\"username\"\u003eUsername\u003c/label\u003e\n            \u003cinput data-minlength=\"1\" maxlength=\"100\" type=\"text\" id=\"username\" name=\"username\"\u003e\n        \u003c/div\u003e\n        \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/fieldset\u003e\n\u003c/form\u003e\n```\n\n\n## Options\n\n#### options.message\nType: `String`  \nDefault: `Please enter a value between [minToken] and [maxToken] characters.`  \nThe default message displayed when a field fails this rule's validation test.\n\n#### options.messageAttr\nType: `String`  \nDefault: `data-validation-minmaxlength-message`  \nThe data attribute formValidation will check when determining [message hierarchy](https://github.com/DEGJS/formValidation#configuring-error-messages)\n\n#### options.events\nType: `Array`  \nDefault: `['focusout','submit']`  \nAn array of DOM events that will cause the rule to run validation on a field (or the entire form, when using `submit`). NOTE: `focusout` should be used in place of `blur` due to event bubbling limitations.\n\n#### options.minAttr\nType: `String`  \nDefault: `data-minlength`  \nThe data attribute the rule will check when determining minimum length.\n\n#### options.maxAttr\nType: `String`  \nDefault: `maxlength`  \nThe data attribute the rule will check when determining maximum length.\n\n#### options.minToken\nType: `String`  \nDefault: `[minToken]`  \nThe token the rule will replace with the calculated minlength value.\n\n#### options.maxToken\nType: `String`  \nDefault: `[maxToken]`  \nThe token the rule will replace with the calculated maxlength value.\n\nFor more detailed usage instructions, see the [formValidation Usage](https://github.com/DEGJS/formValidation#usage) documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdegjs%2Fformvalidation-minmaxlength","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdegjs%2Fformvalidation-minmaxlength","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdegjs%2Fformvalidation-minmaxlength/lists"}