All fields in the trial sign up form should indicate they are required
requested to merge 119347-all-fields-in-the-trial-sign-up-form-should-indicate-they-are-required into master
What does this MR do?
Select2 does not display HTML5 required messages, because it hides the original selects as hidden.
- This fix is a bit hacky, but well tested on all supported browsers.
- The UX bug with select2 is common and all solutions are hacky https://github.com/select2/select2/issues/128 & https://stackoverflow.com/questions/18955835/select2-and-html5-form-validation
- As a first iteration, After the trial form succeeds I will run this for all
select2
s as part of this issue #199039 (closed)
- Select2 works by hiding the HTML
select
element (1) and prependingdiv
sibling (2) - Browsers do not display HTML5 warnings for hidden fields
- The hack makes the original
select
element 1px-1px visible, but transparent, behind theselect2
div, with a lowz-index
and margin-top of -3px. So that it's not clickable.
Issue #119347 (closed)
Screenshots
On Chrome, Firefox, Safari, Opera | New Edge >78 | IE 11 | <Edge 18 |
---|---|---|---|
Very Good | Very Good | Select2 doesn't work so ignored | Ignored |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec
-
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Edited by Alper Akgun