{"id":16217397,"url":"https://github.com/sukima/ember-validity-modifier","last_synced_at":"2025-03-19T10:30:45.482Z","repository":{"id":44568295,"uuid":"327183760","full_name":"sukima/ember-validity-modifier","owner":"sukima","description":"Ember Octane addon to add custom validity (form validation) to form fields","archived":false,"fork":false,"pushed_at":"2023-04-15T01:48:27.000Z","size":967,"stargazers_count":30,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-05-01T23:24:31.626Z","etag":null,"topics":["ember","ember-addon","form","form-validation","forms"],"latest_commit_sha":null,"homepage":"https://sukima.github.io/ember-validity-modifier","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/sukima.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-06T03:01:20.000Z","updated_at":"2024-02-23T22:54:04.000Z","dependencies_parsed_at":"2024-10-10T11:44:59.023Z","dependency_job_id":"e2279aac-db0a-4e73-a2c3-9ceb28004b82","html_url":"https://github.com/sukima/ember-validity-modifier","commit_stats":{"total_commits":60,"total_committers":5,"mean_commits":12.0,"dds":"0.16666666666666663","last_synced_commit":"7ff1562a2967281a58cffd9f190ce761ec7d8b49"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sukima%2Fember-validity-modifier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sukima%2Fember-validity-modifier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sukima%2Fember-validity-modifier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sukima%2Fember-validity-modifier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sukima","download_url":"https://codeload.github.com/sukima/ember-validity-modifier/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244407740,"owners_count":20447842,"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":["ember","ember-addon","form","form-validation","forms"],"created_at":"2024-10-10T11:44:56.951Z","updated_at":"2025-03-19T10:30:45.114Z","avatar_url":"https://github.com/sukima.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-validity-modifier\nA very simple validation addon using a custom modifier. This makes adding\ncustom validations to form elements as simple as adding a modifier to the field\nalong with your own helper or validation function.\n\n[Demo](https://sukima.github.io/ember-validity-modifier)\n\n\n## Compatibility\n\n* Ember.js v3.28 or above\n* Ember CLI v3.28 or above\n* Node.js v14 or above\n\n\n## Installation\n\n```\nember install ember-validity-modifier\n```\n\n\n## Usage\n\n#### Example using a component action\n\n```hbs\n\u003cinput {{validity this.validate}}\u003e\n```\n\n```js\nexport default MyComponent extends Component {\n  @action\n  validate({ value }) {\n    return value === 'foobar' ? [] : ['Must be a foobar'];\n  }\n}\n```\n\n#### Example using a custom helper\n\n```hbs\n\u003cinput {{validity (validate-foobar)}}\u003e\n```\n\n```js\nexport default helper(function validateFoobar() {\n  return ({ value }) =\u003e value === 'foobar' ? [] : ['Must be a foobar'];\n});\n```\n\n#### Example using native validations\n\n```hbs\n\u003cinput required pattern=\"foobar\" {{validity}}\u003e\n```\n\n#### Example using more than one validations\n\n```hbs\n\u003cinput {{validity (validate-present) (validate-phone-number)}}\u003e\n```\n\n#### Example of only validating on specific events\n\nBy default validation will happen on `change`, `input`, and `blur`. Comma separate event names.\n\n```hbs\n\u003cinput {{validity (validate-foobar) on=\"change,input\"}}\u003e\n```\n\n#### Example adding to non form fields (bubbling)\n\nIn cases where we don't have easy access to the form field itself we can also add it to a parent element. This might be the case when adding a modifier that gets applied by another component via its `...attributes`.\n\n```hbs\n\u003cdiv {{validity (validate-foobar)}}\u003e\n  \u003clabel for=\"example\"\u003eExample\u003c/label\u003e\n  \u003cinput id=\"example\"\u003e\n\u003c/div\u003e\n```\n\n#### Example validation on form submit\n\n```hbs\n\u003cform\n  ...attributes\n  {{verify-form-validity submit=this.handleSubmit reportValidity=true}}\n\u003e\n  \u003clabel for=\"firstName\"\u003eFirst name\u003c/label\u003e\n  \u003cinput type=\"text\" name=\"firstName\" id=\"firstName\" required {{validity}}\u003e\n  \u003clabel for=\"lastName\"\u003eLast name\u003c/label\u003e\n  \u003cinput\n    type=\"text\"\n    name=\"lastName\"\n    id=\"lastName\"\n    required\n    {{validity (validate-not-match \"firstName\")}}\n  \u003e\n  \u003cbutton type=\"submit\"\u003eSubmit form\u003c/button\u003e\n\u003c/form\u003e\n```\n\n```js\nimport Component from '@glimmer/component';\nimport { validate } from 'ember-validity-modifier';\n\nexport default class MyForm extends Component {\n  @action\n  handleSubmit({ target: form }) {\n    console.log('Fake submit action', Object.fromEntries(new FormData(form)));\n  }\n}\n```\n\n#### Example with `validateImmediately` argument\n\nTo validate the form state on initial render add `validateImmediately=true`.\n\n```hbs\n  \u003cinput {{validity\n    (fn this.matchTo this.match)\n    on=\"change\"\n    validateImmediately=true\n  }}\u003e\n```\n\n#### Example with `validateTracked` argument\n\nTo validate the form state when  initial render and any time **one** of its dependent arguments change, add the `'validateTracked'` argument with the dependent properties.\n\nBecause the validator argument is a function it is possible to not exercise the tracked properties and thus miss out on validations when those tracked properties change. This is the case of the `fn` helper which lazy executes thus doesn't trigger Ember's auto-tracking if it isn't ran first.\n\nTo compensate we can use `validateTracked` to inform the modifier that it needs to run the validations when these properties change.\n\n```hbs\n  \u003cinput {{validity\n    (fn this.matchTo this.match)\n    on=\"change\"\n    validateTracked=this.match\n  }}\u003e\n```\n\nTo validate the form state any time **any** of its dependent arguments change, add the `validateTracked` argument using the `array` helper and a list of dependent properties.\n\n```hbs\n  \u003cinput {{validity\n    (fn this.matchTo this.match1 this.match2)\n    on=\"change\"\n    validateTracked=(array this.match1 this.macth2)\n  }}\u003e\n```\n\n#### Example with select\n\n```hbs\n\u003cselect name=\"foobar\" {{validity (validate-selected-option)}}\u003e\n  \u003coption value=\"\"\u003e—Pick one—\u003c/option\u003e\n  \u003coption value=\"foo\"\u003eFoo\u003c/option\u003e\n  \u003coption value=\"bar\"\u003eBar\u003c/option\u003e\n  \u003coption value=\"baz\"\u003eBaz\u003c/option\u003e\n\u003c/select\u003e\n```\n\n```js\nexport default helper(function validateSelectedOption() {\n  return ({ name, value }) =\u003e value === '' ? [`Must pick an option for ${name}`] : [];\n});\n```\n\n#### Example with ember-changeset validations\n\n```hbs\n{{#let (changeset this.data this.validate) as |subject|}}\n  \u003cInput\n    @value={{subject.foobar}}\n    {{validity (validate-changeset subject \"foobar\")}}\n  /\u003e\n{{/let}}\n```\n\n```js\nexport default helper(function validateChangeset([changeset, prop]) {\n  return async () =\u003e {\n    await changeset.validate(prop);\n    let { validation: error } = changeset.error[prop] ?? {};\n    return error ? [error] : [];\n  };\n});\n```\n\n#### Example rendering validation messages\n\n```hbs\n{{#let (form-errors) as |errors|}}\n  \u003cinput\n    name=\"foobar\"\n    {{on \"validated\" errors.update}}\n    {{validity (validate-foobar)}}\n  \u003e\n  \u003cspan\u003e{{errors.message.foobar}}\u003c/span\u003e\n{{/let}}\n```\n\nform-error exposes the following:\n\n* `update` — action to process a validated event\n* `set` — action that can set specific fields\n* `for.\u003cname\u003e` — the errors as an array\n* `native.\u003cname\u003e` — any native errors as an array\n* `custom.\u003cname\u003e` — any custom errors as an array\n* `message.\u003cname\u003e` — the `validationMessage` from the DOM element\n\n#### Example CSS\n\n```css\n/* All the things */\n:valid { … }\n:invalid { … }\n\n/* Not on first render, use the validated event to set dataset.validated */\n[data-validited]:valid { … }\n[data-validited]:invalid { … }\n```\n\n## How this works\nThe blog post\n[Managing validity in forms](https://tritarget.org/#Managing%20validity%20in%20forms)\ntakes a dive into a simple native (vanilla) implementation of this idea. In the\npost it describes the idea that validations can be managed through DOM events.\nBy attaching the validation functions to an event handler they can easily manage\nthe native custom validity of the element.\n\nWhen a validate event is dispatched (by default the events are `validate`,\n`input`, `change`, and `blur`). Each validator function registered will be\nevaluated, the results will be consolidated, and the element's custom validity\nis set, finally a `validated` event is dispatched to announce that the process\nis complete (in case of asynchronous validations).\n\n![Sequence diagram of the validation events](http://www.plantuml.com/plantuml/svg/XP7FIiH03CRlVOgmb-fXVO0Yig22byMR5_KGccY3xRHqqeei1P_61_D9REje7LBPqv0_to_vCZkls6fNbKaplf9BWqxXwdOVnNTO2ec-xMkI9-4MqCEc2i76jgBoTSzERz1H6ThJFbJI1yTJ4OgvkgwlMp-hyeBp5-X_a-l3wFzfPCUDxc1xOKrbiEm8ioOnFRFEEammL-bHURrgamigcCq0Nr7qZrN3d7AhfFDjJEAsdNg9LmYJ-o2me0mywsNdjQv-d9-atp5Kx3q-yrbwUWH1uXlKl5YkIU6SyKPM7FsC-TOC3eVQHTJFzuzXYEzaTF6s5agiAEK83sVBuDvOVeJ1x6xcxDXHLvLV)\n\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsukima%2Fember-validity-modifier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsukima%2Fember-validity-modifier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsukima%2Fember-validity-modifier/lists"}