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: 23 days 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 (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-08-29T21:01:09.000Z (2 months ago)
• Last Synced: 2024-10-01T08:41:56.828Z (about 1 month ago)
• Topics: ember, ember-addon, ember-bootstrap
• Language: JavaScript
• Homepage:
• Size: 648 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

==============================================================================

[![CI](https://github.com/kaliber5/ember-bootstrap-constraint-validations/actions/workflows/ci.yml/badge.svg)](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).