ember-cp-validated-control

A wrapper for ember-cp-validations for handling the visibility of error and warning messages, as well as providing the display state of the validations. This is also A11Y friendly by communicating message changes via aria-live="polite" and providing aria-invalid and aria-describedby attributes to integrate with the wrapped control.

Compatibility

• Ember.js v2.18 or above
• Ember CLI v2.13 or above

Installation

npm install ember-cp-validated-control

Usage

Example

<CpValidatedControl
  @validations={{model.validations.attrs.foobar}}
  @showValidation={{showValidation}}
  @errorClassName="my-custom-error-message"
  @warningClassName="my-custom-warning-message"
  as |cvc| >
  <input
    type="text"
    name="foobar"
    aria-describedby={{cvc.ariaDescribedby}}
    aria-invalid={{cvc.ariaInvalid}}
    value={{model.foobar}} />
</CpValidatedControl>

API

Property | Type | Description -------- | ---- | ----------- validations | ResultCollection | ember-cp-validation object for the given attribute. showValidations | Boolean | Flag to determine the visibility of the messages. errorClassName | String | (optional) Custom class name for the error message. warningClassName | String | (optional) Custom class name for the warning message.

Exposed Properties

Property | Type | Description -------- | ---- | ----------- isErrorVisible | Boolean | Indicates error message visibility. isWarningVisible | Boolean | Indicates warning message visibility. isValidationVisible | Boolean | Indicates either the error message or warning message visibility. ariaDescribedby | String | The id of the message container for the aria-describedby attribute on the control. ariaInvalid | Boolean | Indicates if the attribute is invalid and the error message is visibile.

Contributing

If you would like to contribute, you can fork the project, edit, and make a pull request. Please make sure you have passing tests and updated documentation.

Installation

• git clone <repository-url>
• cd ember-validated-input
• yarn install

Linting

• yarn lint:hbs
• yarn lint:js
• yarn lint:js --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• yarn test – Runs ember try:each to test your addon against multiple Ember versions

Running the dummy application

• ember serve
• Visit the dummy application at http://localhost:4200.

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.