Problem/Motivation

The "Flag as required" option is shown even when the Name field is not required. This is confusing because an optional field must not be HTML5 required.

Steps to reproduce

  1. Create a Name field.
  2. Get to the field settings form.
  3. Uncheck the box to make this field not required.
  4. Observe that the "Flag as required" checkbox is still available.

Proposed resolution

While unrelated to #3559064: Fix minimum components required markers shown when the base field is optional, it was initially captured there as a good followup and has a related #3559436: Hide “Show required marker” checkbox when Name field is not required.

Minimum components are only to be HTML5 required when the Name field itself is required, therefore we should only display the "Flag as required" checkbox when the Name field itself is configured as required.

We can use #states to conditionally show or hide the field settings checkbox based on the field required setting.

Remaining tasks

  • Update component configuration form to apply conditional visibility.
  • Add or update test coverage.

User interface changes

Component "Flag as required" options are only visible when the Name field is required.
Not Required
Required

API changes

Data model changes

Issue fork name-3559437

Command icon 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:

Comments

jcandan created an issue. See original summary.

jcandan’s picture

I kept this separate from #3559436: Hide “Show required marker” checkbox when Name field is not required because this is something that can be adopted immediately. While that other ticket is awaiting #3559064: Fix minimum components required markers shown when the base field is optional before it would make sense to go forward with it. This ticket is unblocked. That ticket is blocked.

aryan singh’s picture

Working...

aryan singh’s picture

Status: Active » Needs review

I have raised a MR and I have checked it locally it is working fine.

bluegeek9 made their first commit to this issue’s fork.

bluegeek9 changed the visibility of the branch 8.x-1.x to hidden.

bluegeek9’s picture

Issue summary: View changes
StatusFileSize
new65.32 KB
new43.51 KB
bluegeek9’s picture

Status: Needs review » Fixed
//www.flaticon.com/free-icons/thank-you Thank you for your contribution! Your continued support makes this project sustainable.
There are multiple ways to show appreciation for the work contributed to this project including:

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

jcandan’s picture

Crap. I just stepped on my own toes.

This now prevents #states from marking a conditionally required Name field's component fields, because a site-builder would have to mark the field not-required so that it can be conditionally required at runtime.

It's an interesting problem. Core doesn't give you the option to supply the required="required" attribute--it just does it. Name provides the option, so it makes sense to take away that option when the field is not required.

But, that means it also makes sense to take away the option to choose whether to show required markers on component fields when the field is not required. But, without that, subsequent conditions (e.g. Conditional Fields, Require on Publish) now have to assume that choice (whether to mark component fields required). Which should subsequent handlers choose? Conditional Fields doesn't implement such field-specific changes. Require on Publish was forced to because it is doing something special with requiredness. But, this would be true for any such #states implementations.

Should Name continue to provide these optional required UI handlers despite core's assumption? If so, do we expose these options even when the field is not required in field settings? Perhaps we can with help text noting that it only applies if/when required (whether marked above or via #states changes at runtime).

Having thought through the above, I think that last option makes the most sense. Revert this change, and adopt a help text that notes applicability.

jcandan’s picture

Oh, it's even worse than I thought. The field settings option to show required markers already had that conditional help text!:

[ ] Show component required marker
Appends an asterisk after the component title if the component is required as part of a complete name.
[ ] Flags inputs as required
This automatically validates for empty fields, and flags inputs as required.

I feel stupid.

Okay, but, the Flag option which places the required="required attribute could probably be improved.

How about...?

[ ] Flag components as required
This applies the required attribute if the component is required as part of a complete name, which causes most browsers to validate for empty fields.

jcandan’s picture

jcandan’s picture

@bluegeek9, would you prefer I open a new issue to discuss and revert this?

bluegeek9’s picture

Assigned: Unassigned » bluegeek9
Status: Closed (fixed) » Needs review

I need to review this.

alan d.’s picture

From memory, this was originally just a user facing UI feature to indicate parts of the name were required. For example, given and family were both required for a valid name albeit the name field itself was optional.

-      '#description' => $this->t('This automatically validates for empty fields, and flags inputs as required.'),
+      '#description' => $this->t('This applies the required attribute if the component is required as part of a complete name, which causes most browsers to validate for empty fields.'),

Is this feature broken now? At least one other issue that seems to have been committed without understanding what this was for...

I'm unsure if that feature was carried into the original D8 port and if it was covered by the ported tests, but it sounds like it may need a quick review to see if it's still working. It's purely decorative! It should have never directly added the standard browser validation to a fully empty field, blocking the parent form submission when empty!

This was effectively what it did do in Drupal 7, basically an asterisk with some title text explaining why there was an asterisk.

function theme_name_component_required_marker($variables) {
  $base_element = $variables['base_element'];
  $components = $variables['components'];
  $component_key = $variables['component_key'];
  $name_translations = _name_translations();
  $title = empty($base_element['#title']) ? t('Name') : $base_element['#title'];
  if (!empty($base_element['#allow_family_or_given']) && ($component_key == 'given' || $component_key == 'family')) {
    $title_attribute = t('!given_title or !family_title is required when entering a !title.', array(
      '!given_title' => empty($components['given']['title']) ? $name_translations['given'] : $components['given']['title'],
      '!family_title' => empty($components['family']['title']) ? $name_translations['family'] : $components['family']['title'],
      '!title' => $title,
    ));
  }
  else {
    $component_title = empty($components[$component_key]['title']) ? $name_translations[$component_key] : $components[$component_key]['title'];
    $title_attribute = t('!component_title is required when entering a !title.', array('!component_title' => $component_title, '!title' => $title));
  }
  // Both field label and component labels have already been sanitized.
  return ' <span class="name-required-component-marker" title="' . $title_attribute . '">' . variable_get('name_component_required_marker', '*') . '</span>';
}

The Drupal 7 admin text was "'Appends an asterisk after the component title if the component is required as part of a complete name.'".

As an aside, I remember prototyping various front end options to indicate this to the field itself, but most just cluttered the form / made it more confusing. It's possible this does make some users unnecessarily type in something into the name field, but it was never raised as an issue prior to 2018 and there was a built-in way to indirectly modify this with a variable override (no admin UI though) and the theming function itself.

Edit: re-reading this, this could apply to a new feature? I decided against additional custom validation back in the day as it would definitely need custom client side jscript validation to be implemented correctly.

  • bluegeek9 committed a8109053 on 8.x-1.x
    fix: #3559437 Hide “Flag as required” checkbox when field is not...
bluegeek9’s picture

Assigned: bluegeek9 » Unassigned
Status: Needs review » Fixed

I reverted the changes.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.