Contrib.social

Expand what #config_target can do: automatically set #attributes[pattern] for HTML5 client-side validation when RegEx constraint is present

Open on Drupal.org →
Created on 12 February 2024, 9 months ago
Updated 16 February 2024, 9 months ago

Problem/Motivation

📌 ConfigFormBase + validation constraints: support composite form elements Needs review introduced the necessary infrastructure to remove validation logic from forms, move them into config schema instead, and have the validation constraints in config schema automatically applied.

A few days ago 📌 [PP-1] Add validation constraints to olivero.settings Postponed landed, which removed olivero_theme_settings_validate() because it now is obsolete, thanks to Olivero's config schema defining validation constraints and its theme settings form having adopted #config_target 🚀.

Which also reveals an opportunity for building on top of what #3398982 did and removing the need for duplication. This change landed:

-      '#default_value' => theme_get_setting($key),
+      '#config_target' => "olivero.settings:$key",
      '#attributes' => [
        // Regex copied from Color::validateHex()
        'pattern' => '^[#]?([0-9a-fA-F]{3}){1,2}$',

— the commit for #3395555.

But note how [#attributes' => ['pattern' => …]] still repeats the exact same regex. This is what enables HTML 5's native client-side validation.

Steps to reproduce

N/A

Proposed resolution

Automatically set [#attributes' => ['pattern' => …]].

Remaining tasks

Implement this.

User interface changes

None.

API changes

None.

Data model changes

None.

Release notes snippet

HTML 5 client-side validation is now automatically applied to config forms for those form elements whose corresponding config key has the RegEx validation constraint defined in its config schema.

✨ Feature request
Status

Needs work

Version

11.0 🔥

Component
Configuration  →

Last updated 1 day ago

Created by

🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

Live updates comments and jobs are added and updated live.
  • html5

    Implements and supports the use of HTML5.

  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @wim leers
  • Comment 9 months ago →
    🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺
  • Comment 9 months ago →
    🇬🇧United Kingdom catch

    Are we actually using client side validation in core anywhere? I vaguely remember there being reasons (translation?) we don't yet, but can't find a discussion.

  • Comment 9 months ago →
    🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    Hah, looks like this is pretty much the only place in Drupal core? 😅

    I did find \Drupal\Core\Render\Element\FormElement::processPattern() though, which handles these, introduced in #2305839: Convert hook_element_info() to annotated classes → .

  • First commit to issue fork.
  • Merge request !6602Initail commit → (Open) created by narendraR
  • Pipeline finished with Failed
    9 months ago
    Total: 642s
    #95119
  • Status changed to Needs work 9 months ago
  • Comment 9 months ago →
    🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    Wow, those test failures make no sense at all 🙃

    I did spot one problem in the current MR, but doubt that'll fix it.

  • Pipeline finished with Failed
    9 months ago
    Total: 491s
    #96946
  • Pipeline finished with Failed
    9 months ago
    Total: 619s
    #98361
  • Pipeline finished with Failed
    9 months ago
    Total: 481s
    #98377
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024