{"id":40604140,"url":"https://github.com/stetsd/univalid-strategy-form","last_synced_at":"2026-01-21T04:38:38.268Z","repository":{"id":57386527,"uuid":"123388014","full_name":"stetsd/univalid-strategy-form","owner":"stetsd","description":"Form strategy implementation for univalid module (extends 'univalid-strategy')","archived":false,"fork":false,"pushed_at":"2018-07-04T03:46:56.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-22T11:20:50.163Z","etag":null,"topics":["form","js","univalid","univalid-strategy","univalid-strategy-default","validation"],"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/stetsd.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":"2018-03-01T05:44:18.000Z","updated_at":"2018-07-04T03:46:58.000Z","dependencies_parsed_at":"2022-09-05T03:10:24.280Z","dependency_job_id":null,"html_url":"https://github.com/stetsd/univalid-strategy-form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stetsd/univalid-strategy-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stetsd%2Funivalid-strategy-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stetsd%2Funivalid-strategy-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stetsd%2Funivalid-strategy-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stetsd%2Funivalid-strategy-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stetsd","download_url":"https://codeload.github.com/stetsd/univalid-strategy-form/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stetsd%2Funivalid-strategy-form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28626552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T02:47:06.670Z","status":"ssl_error","status_checked_at":"2026-01-21T02:45:44.886Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["form","js","univalid","univalid-strategy","univalid-strategy-default","validation"],"created_at":"2026-01-21T04:37:57.602Z","updated_at":"2026-01-21T04:38:35.075Z","avatar_url":"https://github.com/stetsd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# univalid-strategy-form\n\nHtml Form Strategy for [univalid](https://github.com/StetsD/univalid) module.\n\nExtends [univalid-strategy](https://github.com/StetsD/univalid-strategy) class\n\n## Install\n\n##### You need also install [univalid](https://github.com/StetsD/univalid) module, it is a core of validation, which manage different strategies.\n\n```sh\nnpm i univalid\nnpm i univalid-strategy-form\n```\n\n\n## Base usage\n\n### .js\n\n```js\nconst univalid = require('univalid')();\nconst UnivalidStrategyForm = require('univalid-strategy-form');\n\n// Base initialize (set strategy)\n\nunivalid.setStrategy(\n    UnivalidStrategyForm({\n        core: univalid, /* required prop */\n        $form: '.js-reg-form', /* required prop */\n\t\tstatusConfig: {\n\t\t\ttargetParent: '.form-group',\n\t\t\ttargetStatus: '.form__msg'\n\t\t}\n    })\n);\n\nunivalid.on('end:valid', uni =\u003e {\n\tconsole.log(uni.getCommonState, uni.getState);\n\tuni.clearState();\n});\n```\n\n### .html\n\n```html\n\u003cform action=\"/\" method=\"POST\" class=\"js-reg-form\"\u003e\n\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel\u003eUsername\u003c/label\u003e\n        \u003cinput \n            name=\"username\"\n            data-validation=\"required\"\n            data-f=\"oL\"\n            data-msg='{\"empty\":\"This Filed empty\", \"invalid\": \"This Field Invalid\", \"filter\": \"Latin Only\", \"success\": \"Is Ok\"}'\u003e\n        \u003cdiv class=\"form__msg\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel\u003eLastname\u003c/label\u003e\n        \u003cinput \n            name=\"lastname\"\n            data-validation \n            data-f=\"oC\"\u003e\n        \u003cdiv class=\"form__msg\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel\u003eEmail address\u003c/label\u003e\n        \u003cinput \n            name=\"email\"\n            data-validation=\"email\"\u003e\n        \u003cdiv class=\"form__msg\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \n\u003c/form\u003e\n\n```\n\n## Setting data-validation in .html\n\nAdd to your html form elements (inputs, selects, textarea) 'data-validation=[type]'\n\nIn current time supports next types:\n\n- **required**\n- **email**\n- **password**\n- **equal** - (equal password type)\n\n```html\n\u003cdiv class=\"form-group\"\u003e\n    \u003clabel\u003eUsername\u003c/label\u003e\n    \n    \u003cinput \n        type=\"text\" \n        name=\"username\" \n        class=\"form-control\" \n        data-validation=\"required\"\u003e\n        \n    \u003cdiv class=\"form__msg\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n## Setting your custom data-validation in .html / js\n\nDo not forget that you have opportunity to set your custom validation handler.\n\nLike this:\n\n#### In .html\n```html\n\u003cdiv class=\"form-group\"\u003e\n    \u003clabel\u003eUsername\u003c/label\u003e\n    \n    \u003cinput \n        type=\"text\" \n        name=\"username\" \n        class=\"form-control\" \n        data-validation=\"my:valid\"\u003e\n        \n    \u003cdiv class=\"form__msg\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### In .js\n```js\n//input the 'example'\nunivalid.setValidHandler({ \n  'my:valid': val =\u003e { \n    if(val.match(/^example$/)){ \n      return true; \n    }else{ \n      return false; \n    } \n  } \n});\n```\n\n[Also see](https://github.com/StetsD/univalid#setvalidhandlerpack)\n\n## Setting data-msg in .html\n\nYou are also can define message (empty, invalid, filter, success) for individual input\n\nAdd to your html form elements (inputs, selects, textarea) 'data-msg=[type]'\n\ntype:\n- **empty**\n- **invalid** - ValidationHandler error\n- **filter** - Filter error ([univalid-key-logger](https://github.com/StetsD/univalid-key-logger) module)\n- **success**\n\n##### ! data-msg must be a valid JSON type\n\n```html\n\u003cdiv class=\"form-group\"\u003e\n    \u003clabel\u003eUsername\u003c/label\u003e\n    \n    \u003cinput \n        type=\"text\" \n        name=\"username\" \n        class=\"form-control\" \n        data-validation=\"required\" \n        data-msg='{\"empty\":\"This Filed empty\", \"invalid\": \"This Field Invalid\", \"filter\": \"Latin Only\", \"success\": \"Is Ok\"}'\u003e\n        \n    \u003cdiv class=\"form__msg\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n- [Also see](https://github.com/StetsD/univalid#setmsgconfigconfig) how to set and edit default 'msgConfig'\n- [Also see](https://github.com/StetsD/univalid#setdefaultmsgconfigconfig) how to set common global 'msgConfig' for collections of forms\n- [Also see](https://github.com/StetsD/univalid#toggledefaultmsgconfig) how to toggle form on common global 'msgConfig'\n\n\n## Setting data-f in .html\n\nYou can define filer`s handler for individual input\n\nIt Handled 'keyboard' events\n\nAdd to your html form elements (inputs, selects, textarea) 'data-f=[type]'\n\nIn current moment available patterns supporting types:\n\n- **oL** - only latin symbols\n- **oC** - only cyrillic symbols\n- **oN** - only numbers\n- **oP** - only numbers and latin symbols\n\n```html\n\u003cdiv class=\"form-group\"\u003e\n    \u003clabel\u003eUsername\u003c/label\u003e\n    \n    \u003cinput \n        type=\"text\" \n        name=\"username\" \n        class=\"form-control\" \n        data-f=\"oL\" \n        data-validation=\"required\"\u003e\n    \n    \u003cdiv class=\"form__msg\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## API\n\n\n### check(pack, core)\n\nValidating the pack\n\n**pack** - Type `object`\n\nStructure of pack must be strict. Like that:\n\nname, val, type - required fields\n```js\n//name, val, type - required fields\n\n[\n    {\n        name: 'username',\n        val: 'Uriy',\n        type: 'required',\n        filter: 'oL',\n        msg: {\n            empty: 'You shall not pass',\n            invalid: 'Validation error',\n            filter: 'Filter error',\n            success: 'All right'\n        }\n    },\n    {\n        name: 'email',\n        val: 'Uriy@mzf.com',\n        type: 'email',\n        filter: val =\u003e {\n            // Your custom filter\n            \n            console.log('Filter', val);\n            \n            // if FilterHandler is Ok then \"return true\"\n                return true;\n            // else \"return false\"\n        },\n        msg: {\n            empty: 'You shall not pass',\n            invalid: 'Bad email',\n            filter: 'Only lat/numbers/specials symbols',\n            success: 'All right'\n        }\n    },\n]\n```\n\n**core** - Type `object`\n\nThe instance of 'univalid' module\n\n\n### send(options)\n\nSend form method\n\n**options** - Type `object` - Default `sendConfig` option\n\n**options.newAjaxBody** - Type `object`\n\nNew Ajax body config include:\n\n- newAjaxBody.type - Type `string` - (if set 'method', that bind html attribute method)\n- newAjaxBody.url - Type `string` - (if set 'action', that bind html attribute action)\n- newAjaxBody.data - data of form\n- newAjaxBody.notDisableSubmit - Type `boolean`\n\n\n**options.cbSendSuccess** - Type `function`\n\n**options.cbSendError** - Type `function`\n\n```js\nunivalid.get('send', {/* options */});\n```\n\n\n**core** - Type `object`\n\nThe instance of 'univalid' module\n\n\n### setStatuses(pack)\n\nMethod of set custom statuses\n\n**pack** - Type `array`\n\nEach field of item of array must be strict named.\n\nItem of pack must have three required field \"name\", \"state\", \"msg\".\n\n```js\n\nunivalid.get('setStatuses', [\n    {\n        \"name\": \"username\",\n        \"state\": \"error\",\n        \"msg\": \"this username is used\"\n    },\n    {\n        \"name\": \"email\",\n        \"state\": \"error\",\n        \"msg\": \"this email is used\"\n    }\n]);\n\n```\n\nExample below shows how may to set statuses on inputs of form after get server validation result\n\n```js\n\nunivalid.setStrategy(UnivalidStrategyForm({\n    // ...\n\n    sendConfig: {\n        type: 'post',\n        url: 'registration',\n        cbSendError: (err, form) =\u003e {\n            form.setStatuses(err.response);\n        }\n    },\n\n    // ...\n}));\n\n```\n\n\n### clearStatuses(pack)\n\nClear statuses of form and fields\n\n**pack** - Type `nodeList`\n\nPack of html nodes inputs, selects, textareas\n\n```js\nunivalid.get('clearStatuses', [/* [ nodes ] */]);\n\n// or clear all statuses of form\n\nunivalid.get('clearStatuses');\n```\n\n\n### clearInputs(inputs)\n\nClear input values\n\n**inputs** - Type `node or nodeList`\n\nMay be one node or array of nodes\n\n```js\nunivalid.get('clearInputs', [/* [ inputs ] */]);\n```\n\n\n### addEvent(events)\n\nAdd new event in form\n\n**events** - Type `object`\n\nMay be one event or object of events\n\n```js\nunivalid.get('addEvent', {\n    ClickInDocument(){ document.addEventListener('click', ()=\u003e{\n\t    console.log('Click!')\n    })}\n});\n```\n\n\n### disable()\n\nDisable all inputs, selects, textareas\n\n```js\nunivalid.get('disable');\n```\n\n\n### enable()\n\nEnable all inputs, selects, textareas\n\n```js\nunivalid.get('enable');\n```\n\n\n### getValidationHandlers()\n\nGet validation handlers.\n\nBy default defined in [univalid-strategy](https://github.com/StetsD/univalid-strategy) abstract class\n\n\n### set(option, val)\n\nSet the option in instance\n\n**option** - Type `string`\n\n```js\nunivalid.set('passConfig', {min: 10, analysis: ['hasLowercase', 'hasDigits', 'hasSpecials']});\n```\n\n\n### get(prop)\n\nGet the prop\n\n**prop** - Type `string`\n\n```js\nunivalid.get('passConfig');\n```\n\n\n## OPTIONS\n\n\n### core\n\nType `object`\n\n**! Required Prop**\n\nThis is instance 'univalid' module\n\nMust be define on init \n\n\n### $form\n\nType `string`\n\n**! Required Prop**\n\nForm selector\n\n\n### clsConfig\n\nType `object`\n\nDefault `{error: 'error', success: 'success'}`\n\nClassName config\n\n\n### passConfig\n\nType `object`\n\nDefault `{min: 6, analysis: ['hasUppercase', 'hasLowercase', 'hasDigits', 'hasSpecials']`\n\nPassword config\n\n```js\nunivalid.set('passConfig', {\n    min: 10,\n    analysis: ['hasUppercase']\n});\n```\n\n\n### statusConfig\n\nType `object`\n\nStatuses config\n\n```js\nunivalid.set('statusConfig', {\n    targetParent: '.form-group',\n    targetStatus: '.form__msg',\n    successStatus: true /* if show success status */\n});\n```\n\n\n### sendConfig\n\nType `object`\n\nSendForm config\n\n```js\nunivalid.set('sendConfig', {\n    type: 'method',\n    url: '/form',\n    notDisableSubmit: true,\n    cbSendSuccess: (res, univalidStrategyFormInstance) =\u003e {\n        console.log(res, univalidStrategyFormInstance)\n    },\n    cbSendError: (err, univalidStrategyFormInstance) =\u003e {\n        console.log(err.response, univalidStrategyFormInstance);\n    }\n});\n```\n\n\n### keyLogger\n\nType `boolean`\n\nOn\\off keyLogger filters\n\n```js\nunivalid.set('keyLogger', true);\n```\n\n\n### checkPassScore\n\nType `object`\n\nCheckPasswordScore config\n\n```js\nunivalid.set('checkPassScore', {\n    target: 'input[type=\"password\"]',\n    cb: val =\u003e {\n        console.log(val);\n    }\n});\n```\n\n\n## UNIVALID API\n\nDo not forget that you are also may use all methods from API univalid module.\n\n**Several examples**\n```js\n// getCommonState - return common state ('success' or 'error')\nunivalid.get('check');\nif(univalid.getCommonState === 'success'){\n    univalid.get('send');\n}\n\n\n// getState - return last state of validation\nunivalid.get('check');\nconsole.log(univalid.getState);\n\n\n// clearState - clear last state of validation\nunivalid.get('check');\nconsole.log(univalid.getState);\nunivalid.clearState();\n\n\n// getStrategy - return current strategy\nconsole.log(univalid.getStrategy);\n\n\n// getValidHandler - return current validation handlers\nconsole.log(univalid.getValidHandler);\n```\n\n\n## EVENTS\n\nYou can subscribe on univalid or univalid-strategy-form events.\n\n```js\n\nunivalid.on('start:valid', (args) =\u003e {\n    console.log('Check!');\n});\n\n```\n\n**Table of events**\n\n| Event | Description |\n|:------:|:-----------:|\n|start:valid|Start validation pack|\n|end:valid|End validation pack|\n|start:valid:field|Start validation field|\n|end:valid:field|End validation field|\n|change:strategy|Change strategy event|\n|set:new-ValidationHandler|Set new ValidationHandler event|\n|change:msg-config|Change message config event|\n|clear:state|Clear state of last validation event|\n|e:submit|Submit form|\n|e:blur|Blur event on current input|\n|e:focus|Focus event on current input|\n|e:keyup|Keyup event on current input|\n|error|Error event|\n|clear:statuses|Clear statuses event|\n|send:form|Send form event|\n|clear:inputs|Clear inputs|\n\n## License\nISC ©\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstetsd%2Funivalid-strategy-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstetsd%2Funivalid-strategy-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstetsd%2Funivalid-strategy-form/lists"}