Problem/Motivation

We added server-side IEF support in #2955290: Use Bootstrap validation framework for IFE. Now we can also add client-side validation support. Bootstrap has an example on https://getbootstrap.com/docs/4.0/components/forms/#custom-styles.

Proposed resolution

  • Add and modify Bootstrap example JS code as a new behavior to the new JS file in bs_bootstrap/js/client-side-validation.js and add related library definition.
  • hook_form_alter() for all forms for now (?) and attach CSS class needs-validation and validation library.
  • In the same hook_form_alter() we need to attach required form error message to input elements.
  • Add option to turn client side validation on and off. We don't like how browsers handles client side validation (different visual representations) but also it will be dificult to provide support for all possible validation errors. Because of this we probably want to support an option to turn this off when needed.
  • Do we also need an option to turn client side validation for specific forms?

If possible we should support additional validation errors for input elements, but i am not sure can we do this out of the box because Bootstrap related CSS just support show or hide of validation error - for this we would need to support validation error types so we can select appropriate error message in CSS that should be displayed. Next input elements should probably be supported with this:

We should also check do we need to support next elements:

Remaining tasks

  • Implement basic client side validation that only validates required elements for now.
  • Do some investigation how we can support additional validation error messages for input elements and create follow-up issues.

User interface changes

None

API changes

None

Data model changes

None

Comments

pivica created an issue. See original summary.

pivica’s picture

Version: 8.x-1.x-dev » 2.x-dev

We will probably work on this in 2.x version. Here is updated doc link for Bootstrap 5 https://getbootstrap.com/docs/5.1/forms/validation/.