Native browser form validation does not fire when submit buttons use #ajax

The Needs Review Queue Bot → tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

Re-rolling for D10.1.x. Also applies on 10.0.7

Fix CCF.

Was previously tagged for tests which appear to still be needed.

Also tagging for issue summary update as the current task is "Find a solution".

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',
      ],
    ];

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',
      ],
    ];

Thanks for reporting your solution @gabriel.passarelli. I used the patch in #70 since we're still on 9.5, and then adapted your JS snippet into my own custom JS. With that combination, the forms we were trying to get both AJAX and native browser validation to work on are now working.

Following #75 works here as well on D10

I have confirmed that the patch from #73 and the custom "clientSideValidationAjax " JS snippet/behavior logic from #75 added to my custom JS behavior allows this to work as desired on D10.

purushotam.rai → made their first commit to this issue’s fork.

patch based on #75: https://git.drupalcode.org/project/drupal/-/merge_requests/5886

I have found that the changes in the latest MR completely override the `novalidate` attribute functionality in some of my forms. Specifically, forms with required fields, and a onchange (not a submit button) that triggers a rebuild of the form.

In my case, I have products on a group and on a user. When adding a user, there is a select element for the company that when changed, triggers an ajax callback that filters a form rebuild that further filters the products that can be assigned. Adding this patch results in the `novalidate` on the `
` element getting ignored, and the ajax callback not being able to submit until all required fields are entered. Having only added this patch last week, reverting the patch out of the build results in the functionality working as expected.

I think that this is by design; since this patch affects the `formnovalidate` attribute, that overrides the `novalidate` attribute.