Use bootstrap for displaying inline validation errors on forms
The pajamas design system specifies that form validation errors should be displayed inline. In other words, each error message should appear below the related input field. For forms implemented with rails view helpers, we have a client-side utility to display inline errors named gl_field_errors, and also we define custom styles for them.
Since bootstrap also provides inline validation and we base our application styles on bootstrap, I propose to rely on bootstrap built-in capabilities for displaying errors. This decision brings the following advantages:
- Less code to maintain.
- Using the bootstrap_form gem will allow us to display client-side and server-side errors using the same semantics: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/26502/diffs#c1a7e0552e729adbdf1597104eb596df55fb02ec_11_6. This gem was recently upgraded, so it produces correct bootstrap 4.x (see gitlab-ce#49856) markup.
- Conform with the design system without implementing a new component for such purpose.
To switch to bootstrap, we have to do the following:
- gl_field_errors should use bootstrap's error class selectors to apply error styles to messages.
- Remove gl_field_errors CSS selectors style definitions, as long as bootstrap can provide the same functionality.
- Remove server-side validation messages if client-side validation is happening. To avoid this behavior
Edited by Enrique Alcántara