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-validationand 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:
- input type email - when email is not correctly formatted
- input type number - these elements offer a basic validation already (for example it is not possible to enter a letter), but if possible we should provide error messages for step, min and max, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#V...
- input type URL - check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url#Vali...
We should also check do we need to support next elements:
- input type month - not sure do we have support for this element in Drupal? Anyway MDN states that it is possible to enter invalid date https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month#Va....
- input type time - there is min and max attributes that can be validated https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#Val...
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
Comment #2
pivica commentedWe 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/.