🇧🇷Brazil @gabriel.passarelli

Patch #151 worked for me:
Drupal: 10.1.1
PHP: 8.1.14

Before Patch

Views Configuration

HTML

After Patch

Views Configuration

HTML with config enabled

HTML with config disabled

Patches #15 and #17 work as expected, but the login form has a Permanent cache so when the cache was enabled to destination parameter was not being set correctly.

So I've created an MR to include patches #15 and #17 but also add the destination parameter in the Login Form cache context

gabriel.passarelli → made their first commit to this issue’s fork.

I've created an MR that adds grid-row and grid-column attributes for the .layout-node-form elements.
Before the changes

After the changes

gabriel.passarelli → created an issue.

I was able to make #73 work, but I had to add a custom code to my JS scripts. And the reason for this is that the patch on #73 fires an event,drupalAjaxFormValidate and will wait for the result of that event in order to check if it should trigger the AJAX submit or not, but it does not trigger the native browser form validation.

So I had to implement my own code for this event and trigger the native browser validation.

Drupal.behaviors.clientSideValidationAjax = {
    attach(context) {
      $(context).on("drupalAjaxFormValidate", (event) => {
        const form = $(event.target).closest("form")[0];
        if (!form.checkValidity()) {
          // This is the magic function that displays the validation errors to the user
          form.reportValidity();
          return false;
        }
        return true;
      });
    },
};

It's also important to highlight that if you have any additional #ajax to the form, that you don't want to trigger the native validation when that AJAX is performed, you need to add a formnovalidate attribute to your field definition in the form api. Like this:

    $form['select_with_ajax'] = [
      '#type' => 'select',
      ...
      '#attributes' => [
        'formnovalidate' => "formnovalidate",
      ],
      '#ajax' => [
        'callback' => '::ajaxWithoutNativeValidation',
      ],
    ];

gabriel.passarelli → created an issue.

I was able to make #73 work, but I had to add a custom code to my JS scripts. And the reason for this is that the patch on #73 fires an event,drupalAjaxFormValidate and will wait for the result of that event in order to check if it should trigger the AJAX submit or not, but it does not trigger the native browser form validation.

So I had to implement my own code for this event and trigger the native browser validation.

Drupal.behaviors.clientSideValidationAjax = {
    attach(context) {
      $(context).on("drupalAjaxFormValidate", (event) => {
        const form = $(event.target).closest("form")[0];
        if (!form.checkValidity()) {
          // This is the magic function that displays the validation errors to the user
          form.reportValidity();
          return false;
        }
        return true;
      });
    },
};

It's also important to highlight that if you have any additional #ajax to the form, that you don't want to trigger the native validation when that AJAX is performed, you need to add a formnovalidate attribute to your field definition in the form api. Like this:

    $form['select_with_ajax'] = [
      '#type' => 'select',
      ...
      '#attributes' => [
        'formnovalidate' => "formnovalidate",
      ],
      '#ajax' => [
        'callback' => '::ajaxWithoutNativeValidation',
      ],
    ];

gabriel.passarelli → created an issue.