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.
Compatibility
- Ember.js v3.16 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
Installation
ember install ember-validity-modifier
Usage
Example using a component action
export default MyComponent extends Component {
@action
validate({ value }) {
return value === 'foobar' ? [] : ['Must be a foobar'];
}
}
Example using a custom helper
export default helper(function validateFoobar() {
return ({ value }) => value === 'foobar' ? [] : ['Must be a foobar'];
});
Example using native validations
Example using more than one validations
Example of only validating on specific events
By default validation will happen on change
, input
, and blur
. Comma separate event names.
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
.
Example validation on form submit
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)));
}
}
validateImmediately
argument
Example with To validate the form state on initial render add validateImmediately=true
.
validateTracked
argument
Example with 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.
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.
Example with select
export default helper(function validateSelectedOption() {
return ({ name, value }) => value === '' ? [`Must pick an option for ${name}`] : [];
});
Example with ember-changeset validations
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
form-error exposes the following:
update
β action to process a validated eventset
β action that can set specific fieldsfor.<name>
β the errors as an arraynative.<name>
β any native errors as an arraycustom.<name>
β any custom errors as an arraymessage.<name>
β thevalidationMessage
from the DOM element
Example 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 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 guide for details.
License
This project is licensed under the MIT License.