{"id":18532345,"url":"https://github.com/triptyk/ember-base-form-validation","last_synced_at":"2026-06-24T02:32:06.455Z","repository":{"id":35601109,"uuid":"218006838","full_name":"TRIPTYK/ember-base-form-validation","owner":"TRIPTYK","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-11T11:12:07.000Z","size":10545,"stargazers_count":0,"open_issues_count":26,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-15T03:11:53.486Z","etag":null,"topics":[],"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/TRIPTYK.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2019-10-28T09:08:20.000Z","updated_at":"2020-03-23T21:09:57.000Z","dependencies_parsed_at":"2023-01-16T00:46:10.449Z","dependency_job_id":null,"html_url":"https://github.com/TRIPTYK/ember-base-form-validation","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TRIPTYK%2Fember-base-form-validation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TRIPTYK%2Fember-base-form-validation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TRIPTYK%2Fember-base-form-validation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TRIPTYK%2Fember-base-form-validation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TRIPTYK","download_url":"https://codeload.github.com/TRIPTYK/ember-base-form-validation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239248389,"owners_count":19607012,"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-11-06T19:06:00.090Z","updated_at":"2026-06-24T02:32:06.413Z","avatar_url":"https://github.com/TRIPTYK.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ember-base-form-validation\n==============================================================================\n\n![Test](https://github.com/TRIPTYK/ember-base-form-validation/workflows/Test/badge.svg)\n![Build](https://github.com/TRIPTYK/ember-base-form-validation/workflows/Build/badge.svg)\n[![npm version](https://badge.fury.io/js/ember-base-form-validation.svg)](https://badge.fury.io/js/ember-base-form-validation)\n\nSimple ember component based form validation module , only providing base structure and components for validation . His goal is to be flexible and adaptive to any situation.\n\n:warning: This addon does not provide any types validation methods or checks.\n\n\nCompatibility\n------------------------------------------------------------------------------\n\n* Ember.js v2.18 or above\n* Ember CLI v2.13 or above\n* Node.js v8 or above\n\n\nInstallation\n------------------------------------------------------------------------------\n\n```\nember install ember-base-form-validation\n```\n\n\nFeatures\n------------------------------------------------------------------------------\n\n- Async validation\n- Component level validation\n- You choose when to validate and at which level\n\nElements\n------------------------------------------------------------------------------\n\n### The validation form component\n\nThe validation form is the base of the validation , it must contain a `@schema` attribute in order to provide validation to the inputs.\n\n*userform.hbs*\n```html\n\u003cValidationForm @validateOnInit={{false}} class=\"form\" @schema={{this.validation}} as |form|\u003e\n\u003c/ValidationForm\u003e\n```\n\n#### attributes\n- `@schema` (required) : a `Validation schema` for the children inputs\n- `@validateOnInit` (optional) : a `boolean` to tell the form to validate or not all the children on init.\n- `any html attributes`(optional)\n\n#### methods\n\n- `validate`  : runs the validation for all the children\n\n#### properties\n\n\n- `isDirty` (`boolean`) : returns if the form is dirty (any field has been validated)\n- `hasErrors` (`boolean`) : returns if the form validator has errors\n- `validating` (`boolean`) : returns if the form validator is running validations (for async).\n\n### The input component\n\nThe validation input is an HTML input who validates its value after some events had been triggered.\n\n```html\n\u003cValidationForm class=\"form\" @schema={{this.validation}} as |form|\u003e\n  \u003cValidationInput @validation=\"username\" @validateOn=\"change\" name=\"username\" @parent={{form}} as |i|\u003e\n    {{#if i.error}}\n      \u003cp\u003e{{i.error}}\u003c/p\u003e\n    {{/if}}\n  \u003c/ValidationInput\u003e\n  \u003cValidationInput @validation=\"email\" @validateOn=\"focus\" name=\"email\" @parent={{form}} as |i|\u003e\n    {{#if i.error}}\n      \u003cp\u003e{{i.error.message}} for {{i.error.field}}\u003c/p\u003e\n    {{/if}}\n  \u003c/ValidationInput\u003e\n  \u003cinput type=\"submit\" disabled={{form.hasErrors}} {{on \"click\" this.submit}} value=\"submit\"\u003e\n\u003c/ValidationForm\u003e\n```\n\n#### attributes\n- `@parent` (`BaseValidationFormComponent`) (required) : the parent form.\n- `@validation` (`string`) (required) : Tell which validation the validator must use to validate the input value.\n- `@validateOn` (`string`) (optional) : an html event to tell the input when to launch its validation.\n- `@alone` (`boolean`) (optional) : disable the validation , `@parent` and `@validation` attributes become optional.\n- `any html attributes`(optional)\n\n#### methods\n\n- `validate`  : runs the validation for the input\n\n#### properties\n\n- `isDirty` (`boolean`) : returns if the input value is dirty (has been validated)\n- `error` (`any`) : error associated to the input (`null` if no error)\n\n### The validation schema\n\nThe validation schema checks if the current value of the input is correct , otherwhise it returns any value indicating there's an error for the field.\nIf it returns `null` or `undefined` , the value is correct.\nThe method can be async or sync.\n\n```js\nimport validator from 'validator'; // external validation module\nimport { BaseValidator , validationProperty } from 'ember-base-form-validation';\n\nexport class UserValidator extends BaseValidator {\n    @validationProperty()\n    username(str) {\n        if (!validator.isLength(str,{\n            min : 10\n        })) {\n            return 'Lenght must be less than 10 characters';\n        }\n    }\n\n    @validationProperty()\n    async email(str) {\n        if (!validator.isEmail(str)) {\n            return { // can return in any format you want\n              message : 'Email not valid',\n              field : 'email'\n            };\n        }\n    }\n}\n```\n\n#### The validation property\n\n`@validationProperty(ignoreUndefined = true)` indicates that the method is a validation method. The parameter `ignoreUndefined` converts the input value to a null string if it's undefined.\n\n### properties\n\n- `errors` `object` : errors of the validator\n- `context` `any` : context passed by the constructor\n\n\n### methods\n\n- `waitAndCheckErrors` (`Promise\u003cboolean\u003e`) : wait for the validator to finish validation and returns if it contains errors.\n\n- `hasErrors` (`boolean`) : returns if validator has errors\n\n- `isDirty` (`boolean`) : returns if validator has validated this field at least once\n\n- `validationRunning` (`boolean`) : returns if validator is running async tasks.\n\n### Registeting and checking the validation controller side \n\n```js\nimport Component from '@glimmer/component';\nimport { UserValidator } from '../validation/user';\nimport { action } from '@ember/object';\n\nexport default class UserFormComponent extends Component {\n    validation;\n\n    constructor(...args) {\n        super(...args);\n        this.validation = new UserValidator(this);\n    }\n    \n    @action\n    submit(t) {\n        this.validation.waitAndCheckErrors().then(  (hasErrors) =\u003e {\n          if (hasErrors) {\n            return;\n          }\n          // do your job\n        }\n    }\n}\n```\n\n\n\n### Custom validation input :\n\nSame as above except for the template.\nCustom Input let you define you own input to bind the value to and validate.\n\n*userform.hbs*\n```handlebars\n\u003cValidationForm @validateOnInit={{true}} @schema={{this.validation}} as |form|\u003e\n  \u003cValidationInputCustom @parent={{form}} @validation=\"username\" @value={{@model.username}} as |i|\u003e\n    \u003cInput type=\"text\" name=\"username\" @value={{i.value}} {{on \"change\" i.validate}}  /\u003e\n\n    {{#if i.error}}\n      \u003cp\u003e{{i.error}}\u003c/p\u003e\n    {{/if}}\n  \u003c/ValidationInputCustom\u003e\n\n    \u003cValidationInputCustom @parent={{form}} @validation=\"email\" @value={{@model.email}} as |i|\u003e\n    \u003cInput type=\"text\" name=\"email\" @value={{i.value}} {{on \"change\" i.validate}}  /\u003e\n\n    {{#if i.error}}\n      \u003cp\u003e{{i.error}}\u003c/p\u003e\n    {{/if}}\n  \u003c/ValidationInputCustom\u003e\n  \n  {{#if form.validating}}\n    \u003cp\u003eValidating...\u003c/p\u003e\n  {{else}}\n    \u003cinput type=\"submit\" disabled={{form.hasErrors}} {{on \"click\" this.submit}} value=\"submit\"\u003e\n  {{/if}}\n\u003c/ValidationForm\u003e\n```\n\n### Create your own components\n\nYou can inherit `BaseValidationInputComponent` class to make your custom input component and `BaseValidationFormComponent` to make your own validation form\n\n*myinput.js*\n```js\nimport { action } from '@ember/object';\nimport { BaseValidationInputComponent } from 'ember-base-form-validation';\n\nexport default class MyinputComponent extends BaseValidationInputComponent {\n    constructor() {\n        super(...arguments);\n        console.log(\"Init custom\");\n    }\n\n    @action\n    validate() {  \n        super.validate();\n        console.log(\"Validate \" + this.name);\n    }\n}\n\n```\n\n*myform.js*\n```js\nimport { action } from '@ember/object';\nimport { BaseValidationFormComponent } from 'ember-base-form-validation';\n\nexport default class MyformComponent extends BaseValidationFormComponent {\n    constructor() {\n        super(...arguments);\n        console.log(\"Init custom\");\n    }\n\n    @action\n    validate() {  \n        super.validate();\n        console.log(\"Validate all\");\n    }\n}\n```\n\nContributing\n------------------------------------------------------------------------------\n\n:exclamation: I'm new to EmberJS community , don't hesitate to contribute !\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\nLicense\n------------------------------------------------------------------------------\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftriptyk%2Fember-base-form-validation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftriptyk%2Fember-base-form-validation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftriptyk%2Fember-base-form-validation/lists"}