Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
We are using a custom form-required-mark span element to mark required form labels in a form. The problem is that this does not work with state:required JS change event - required classes are added over JS code in core/states.js. This results in state change required elements missing form-required-mark span element.
Proposed resolution
Similarly like core is doing add JS code that is reacting to state:required document change and add/remove form-required-mark element as needed.
Blocked by
Blocked by next two core issues that needs to be resolved first before we can merge this:
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | support-state-required-change-3084984-8.patch | 1.61 KB | pivica |
Issue fork bs_base-3084984
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
pivica commentedHere is a patch.
Comment #3
berdirSee #2912092: State required asterisk doesn't show, maybe we should rely on the core fix instead of duplicating it?
Comment #4
pivica commentedThe main problem here is that in addition to CSS require classes we are also using an additional span element for required mark in bs_bootstrap/templates/form/form-element-label.html.twig:
This additional span required element was introduced in https://git.drupalcode.org/project/bs_base/commit/e9785a3 because of Bootstrap custom element support for radio/checkbox CSS styles, which were conflicting with our old required pseudo styles. Bootstrap custom radio/checkbox use both before and after pseudo-elements so there is no room for our custom required pseudo-element.
Additionally Bootstrap does not have visual styles for required elements like Drupal have, what it has is a client validation framework which will mark required fields on form submit. This creates additional potential problems for us.
So what we need to do here is to do the same thing that Drupal is doing and on state require change inject or remove span.form-required-mark and that is what the code in the patch is doing - it is not adding or removing CSS classes because Drupal state.js code is doing that, it is just running after that code and managing span element.
I've checked patch in #2912092: State required asterisk doesn't show, it seems that JS selectors in the core is not covering all possible elements (also there is #2419131: [PP-1] #states attribute does not work on #type datetime for datetime element). We should wait with this patch until core issues are fixed and then use JS selectors like core is doing.
Comment #5
pivica commentedUpdated patch against latest dev version and patches that will go into next release.
Comment #6
pivica commentedBoth core issues are still open, moving this to 2.x.
Comment #7
pivica commentedComment #8
pivica commentedPatch is updated against #3474789: Deprecate bs_bootstrap subtheme merge request. Moved this to bs_base, added missing jQuery dependency in library definition and removed Drupal var from JS code.
Keeping this still in patch for now and when 3474789 gets in we could create MR if needed.
Comment #10
pivica commentedThis conflicted with latest 2.0.x version. Fixed and also switched from var to const for variables.