Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sukima/ember-validity-modifier
Ember Octane addon to add custom validity (form validation) to form fields
https://github.com/sukima/ember-validity-modifier
ember ember-addon form form-validation forms
Last synced: 3 months ago
JSON representation
Ember Octane addon to add custom validity (form validation) to form fields
- Host: GitHub
- URL: https://github.com/sukima/ember-validity-modifier
- Owner: sukima
- License: mit
- Created: 2021-01-06T03:01:20.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-04-15T01:48:27.000Z (almost 2 years ago)
- Last Synced: 2024-05-01T23:24:31.626Z (9 months ago)
- Topics: ember, ember-addon, form, form-validation, forms
- Language: JavaScript
- Homepage: https://sukima.github.io/ember-validity-modifier
- Size: 944 KB
- Stars: 30
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-validity-modifier
A very simple validation addon using a custom modifier. This makes adding
custom validations to form elements as simple as adding a modifier to the field
along with your own helper or validation function.
[Demo](https://sukima.github.io/ember-validity-modifier)
## Compatibility
* Ember.js v3.28 or above
* Ember CLI v3.28 or above
* Node.js v14 or above
## Installation
```
ember install ember-validity-modifier
```
## Usage
#### Example using a component action
```hbs
```
```js
export default MyComponent extends Component {
@action
validate({ value }) {
return value === 'foobar' ? [] : ['Must be a foobar'];
}
}
```
#### Example using a custom helper
```hbs
```
```js
export default helper(function validateFoobar() {
return ({ value }) => value === 'foobar' ? [] : ['Must be a foobar'];
});
```
#### Example using native validations
```hbs
```
#### Example using more than one validations
```hbs
```
#### Example of only validating on specific events
By default validation will happen on `change`, `input`, and `blur`. Comma separate event names.
```hbs
```
#### Example adding to non form fields (bubbling)
In 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`.
```hbs
Example
```
#### Example validation on form submit
```hbs
First name
Last name
Submit form
```
```js
import Component from '@glimmer/component';
import { validate } from 'ember-validity-modifier';
export default class MyForm extends Component {
@action
handleSubmit({ target: form }) {
console.log('Fake submit action', Object.fromEntries(new FormData(form)));
}
}
```
#### Example with `validateImmediately` argument
To validate the form state on initial render add `validateImmediately=true`.
```hbs
```
#### Example with `validateTracked` argument
To validate the form state when initial render and any time **one** of its dependent arguments change, add the `'validateTracked'` argument with the dependent properties.
Because 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.
To compensate we can use `validateTracked` to inform the modifier that it needs to run the validations when these properties change.
```hbs
```
To 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.
```hbs
```
#### Example with select
```hbs
—Pick one—
Foo
Bar
Baz
```
```js
export default helper(function validateSelectedOption() {
return ({ name, value }) => value === '' ? [`Must pick an option for ${name}`] : [];
});
```
#### Example with ember-changeset validations
```hbs
{{#let (changeset this.data this.validate) as |subject|}}
{{/let}}
```
```js
export default helper(function validateChangeset([changeset, prop]) {
return async () => {
await changeset.validate(prop);
let { validation: error } = changeset.error[prop] ?? {};
return error ? [error] : [];
};
});
```
#### Example rendering validation messages
```hbs
{{#let (form-errors) as |errors|}}
{{errors.message.foobar}}
{{/let}}
```
form-error exposes the following:
* `update` — action to process a validated event
* `set` — action that can set specific fields
* `for.` — the errors as an array
* `native.` — any native errors as an array
* `custom.` — any custom errors as an array
* `message.` — the `validationMessage` from the DOM element
#### Example CSS
```css
/* All the things */
:valid { … }
:invalid { … }
/* Not on first render, use the validated event to set dataset.validated */
[data-validited]:valid { … }
[data-validited]:invalid { … }
```
## How this works
The blog post
[Managing validity in forms](https://tritarget.org/#Managing%20validity%20in%20forms)
takes a dive into a simple native (vanilla) implementation of this idea. In the
post it describes the idea that validations can be managed through DOM events.
By attaching the validation functions to an event handler they can easily manage
the native custom validity of the element.
When a validate event is dispatched (by default the events are `validate`,
`input`, `change`, and `blur`). Each validator function registered will be
evaluated, the results will be consolidated, and the element's custom validity
is set, finally a `validated` event is dispatched to announce that the process
is complete (in case of asynchronous validations).
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).