https://github.com/ember-bootstrap/ember-bootstrap-constraint-validations
Integrate native HTML5 validation into custom styled ember-bootstrap forms.
https://github.com/ember-bootstrap/ember-bootstrap-constraint-validations
ember ember-addon ember-bootstrap
Last synced: about 1 year ago
JSON representation
Integrate native HTML5 validation into custom styled ember-bootstrap forms.
- Host: GitHub
- URL: https://github.com/ember-bootstrap/ember-bootstrap-constraint-validations
- Owner: ember-bootstrap
- License: mit
- Created: 2022-05-24T17:23:07.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-01-25T11:29:24.000Z (over 1 year ago)
- Last Synced: 2025-04-12T10:07:36.444Z (about 1 year ago)
- Topics: ember, ember-addon, ember-bootstrap
- Language: JavaScript
- Homepage:
- Size: 647 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
ember-bootstrap-constraint-validations
==============================================================================
[](https://github.com/kaliber5/ember-bootstrap-constraint-validations/actions/workflows/ci.yml)
This addon integration with [ember-bootstrap](https://www.ember-bootstrap.com/) to support form validations based on the
browser's native HTML5 [constraint validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation).
But instead of the browser's built-in validation UI, validation errors will be rendered using Bootstrap's [Custom Styles](https://getbootstrap.com/docs/5.2/forms/validation/#custom-styles).
See the [FormElement documentation](https://www.ember-bootstrap.com/api/classes/Components.FormElement.html) for
further details.
Compatibility
------------------------------------------------------------------------------
* Ember Bootstrap v5 or above
* Ember.js v3.24 or above
* Ember CLI v3.24 or above
* Node.js v12 or above
Installation
------------------------------------------------------------------------------
```
ember install ember-bootstrap-constraint-validations
```
Usage
------------------------------------------------------------------------------
Apply the HTML5 validation attributes as needed to your form controls. The form elements [`@controlType`](https://www.ember-bootstrap.com/api/classes/Components.FormElement.html#property_controlType)
argument will already apply the correct `type` attribute for the rendered `` element. But you can also add
additional HTML5 attributes like `required`, by applying them as attributes to the form control.
For this you must use the block form syntax of form elements, so you can apply them to the yielded form `control` (which basically represents the ``),
and not the parent *element* (a wrapper `
`):
```hbs
Submit
```
In this example we have defined a "Name" text field, which is `required` and has a `minlength` of 3, as well as an optional field of type
`email`. When submitting this form, or when focussing out of a field, the appropriate Bootstrap validation markup will be rendered:
Note that the error messages are natively provided by the browser itself, given by the form element's [`validationMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation#validationmessage).
Contributing
------------------------------------------------------------------------------
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).