Validation required for hidden element field not showing on save configuration

1

Hello.
I have a situation I don’t know how to solve. In the Orestbida Cookie Consent plugin, in the content section of the admin panel, I have an Elements field, which has several subfields, each with two options: Usage Title and Description. The issue is that in one of the elements (Necessary Cookies), these fields are required in the plugin’s blueprints.yaml, but since the Necessary Cookies section isn’t visible by default (it’s the second one in the elements combobox), saving the plugin configuration doesn’t show any errors, and I’d like it to show an error at the top, just like when saving the content of a plugin or theme. Otherwise, the only way to know if these fields are required is to select the Necessary Cookies item in the elements combobox, and then if I click Save, it indicates that they are required in the text boxes for that element.

I’ve tried something with onAdminSave, but I don’t think it’s the right approach, as form field validation is performed before the configuration is saved.

Could you provide me with a solution to this issue?

Here are some screenshots:

orestbida1
orestbida11646×765 65 KB

orestbida2
orestbida21677×706 68.9 KB

fields:
            usage:
              type: element
              fields:
                cookies_sections.usage.title:
                  type: text
                  size: large
                  label: PLUGIN_ORESTBIDA_COOKIE_CONSENT.USAGE_TITLE
                  placeholder: PLUGIN_ORESTBIDA_COOKIE_CONSENT.USAGE_PLACEHOLDER
                cookies_sections.usage.description:
                  type: textarea
                  rows: 3
                  markdown: true
                  label: PLUGIN_ORESTBIDA_COOKIE_CONSENT.DESCRIPTION_LABEL
                  placeholder: PLUGIN_ORESTBIDA_COOKIE_CONSENT.DESCRIPTION_PLACEHOLDER
            necessary:
              type: element
              fields:
                cookies_sections.necessary.title:
                  type: text
                  label: PLUGIN_ORESTBIDA_COOKIE_CONSENT.NECESSARY_TITLE
                  placeholder: PLUGIN_ORESTBIDA_COOKIE_CONSENT.NECESSARY_PLACEHOLDER
                  validate:
                    type: text
                    required: true
                cookies_sections.necessary.description:
                  type: textarea
                  rows: 3
                  markdown: true
                  label: PLUGIN_ORESTBIDA_COOKIE_CONSENT.DESCRIPTION_LABEL
                  placeholder: PLUGIN_ORESTBIDA_COOKIE_CONSENT.DESCRIPTION_PLACEHOLDER
                  validate:
                    type: text
                    required: true
2

It’s HTML5 validation and not much you can do about it, except disabling it completely:

<form method="post" action="/" novalidate>...</form>

Then form will be submitted and validation would happen server-side

3

@pmoreno, well, elements is a conditional field, and its behavior is as intended

1 Like
4

Thanks @Karmalakas y @b.da for your feedback. I may need to change the field type in which this content is displayed. Any suggestions?

5

Show all 4 fields in 2 columns

1 Like
6

That’s exactly what I was starting to test. It might be the best way for the user to check if they’re missing a required field.

7

Honestly, I can’t imagine a situation where anyone would want to hide mandatory fields. That’s probably one of the worst UX :thinking:

Users should not need to check if they didn’t fill something, that’s required. It should be thrown in their face :grinning_face: I’ve seen some forms at the bottom of the page and when submitted, page reloads at the top. Terrible experience…

8

You’re absolutely right, and I’m trying to make sure users don’t have that experience, but I haven’t used the element field before, and I thought it would behave the same as a normal form, displaying the required field message, even though it would be displayed when clicking on a combo box option.

I’m definitely going to change it so everything works as it should.

Thanks for everything.