Ajax enabled Webform ignores client side form validation [#3337562]

Problem/Motivation

I have a contact webform, wich opens in side a modal and submits via ajax. I'm using for this the core ajax functionality introduced in https://www.drupal.org/project/webform/issues/2757491. (I also tried to find a solution via SO, but it went pretty sideways: https://drupal.stackexchange.com/questions/314525/webform-ajax-how-to-al...)

I'm including the webform like this:

<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
      </div>
      <div class="modal-body pt-1">
        {{ { '#type': 'webform', '#webform': 'contact' } }}
      </div>
    </div>
  </div>
</div>

The webform has this config:

// ...
settings:
  ajax: true
  ajax_scroll_top: form
  ajax_progress_type: fullscreen
  ajax_effect: fade
  ajax_speed: null
// ...

Issue: If I submit it in the overlay, it loads via ajax, but the required fields are not validated clientside. I'm able to submit the form with empty fields, which leads then to a pretty massive error response and a generally unnessesary clumsy user experience.

Steps to reproduce

Create a webform with ajax enabled and some required field

Include the form in some template

Submit the form without filling any field - it submits and returns a lot of unnessessary error messages

Proposed resolution

Use at least the html5 client side validation, better the full webform client side validation js. Looking at the code, this should probably happen either in the ajax.options.beforeSubmit or ajax.options.beforeSerialize functions of the ajax api - see web/core/misc/ajax.js

Remaining tasks

User interface changes

API changes

Data model changes

Comment	File	Size	Author
#10	Screenshot 2023-02-02 at 16.58.06.png	46.08 KB	Schoenef
#8	Screenshot 2023-02-02 at 11.33.03.png	81.07 KB	Schoenef
#7	webform.webform.kontakt.yml	7.7 KB	Schoenef
#4	webform.webform.contact.yml	7.69 KB	jrockowitz

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

30 January 2023 at 12:00

Schoenef created an issue. See original summary.

Comment #2

Schoenef CreditAttribution: Schoenef for flowconcept solutions commented 30 January 2023 at 12:16

Issue summary:

View changes

Comment #3

Schoenef CreditAttribution: Schoenef for flowconcept solutions commented 30 January 2023 at 12:25

Urks, this appears to be really deeply in the core already. It is aparently possible to either override the Drupal.Ajax.prototype.beforeSend (https://www.drupal.org/forum/support/module-development-and-code-questio...) or potentially to do it for a specific call only: https://drupal.stackexchange.com/questions/1890/how-to-add-some-javascri...

This should not be done generally but only for webform ajax.

Comment #4

jrockowitz CreditAttribution: jrockowitz as a volunteer and at Webform module Open Collective, The Big Blue House commented 1 February 2023 at 19:43

File	Size
webform.webform.contact.yml	7.69 KB

Using the built-in modal support via the below code and see attached. Modals with clientside validation are working as expected.

<a href="/form/contact" class="webform-dialog webform-dialog-normal button">Test Normal</a>

There are some issues with the latest version of the clientside validation module.

@see #3110890: Cientside validation errors revert to being output as a label in webform wizard pages with ajax enabled
@see #3322946: Once is not well implemented

What version of the clientside validation module are you using? 3.x or 4.x

Comment #5

Schoenef CreditAttribution: Schoenef for flowconcept solutions commented 1 February 2023 at 19:56

Dear @jrockowitz,

it looks like my webform knowledge has a lot of holes... (It's the first time I hear of the
Webform Clientside Validation module or build in modal support).

Incidentally it is not even activated in my project, so I'll try it out tomorrow and if it works. This whole ticket might be not an issue at all...

Thx for answering never the less!

Comment #6

jrockowitz CreditAttribution: jrockowitz as a volunteer and at Webform module Open Collective, The Big Blue House commented 1 February 2023 at 20:01

@see https://www.youtube.com/watch?v=zmRxyUHWczw
@see https://www.youtube.com/watch?v=tgF5bJt9vnY

Comment #7

Schoenef CreditAttribution: Schoenef for flowconcept solutions commented 2 February 2023 at 10:20

File	Size
webform.webform.kontakt.yml	7.7 KB

Dear @jrockowitz,

so I used your example yml form and enabled the webform client side validation module. It does work for your example (which has not ajax enabled) on the webform page, but I was not able to get it as model using

<a href="/form/kontakt" class="webform-dialog webform-dialog-normal button">Test Normal</a>

Any other module I'm missing?

However - if I enable ajax, the client side validation is ignored again (please see the updated yaml of your form - I had to rename it to kontakt thou)

So I think it really is a bug, ajax should not prevent the client side validation in my opinion. Ideally also it would not be necessary to install any extra plugin for the basic html5 client side form validation api to kick in.

Comment #8

Schoenef CreditAttribution: Schoenef for flowconcept solutions commented 2 February 2023 at 10:36

File	Size
Screenshot 2023-02-02 at 11.33.03.png	81.07 KB

Ok, I just found the "Enable Side Wide Modal Support" checkbox - thx a lot for the helpful videos.

however, this is exactly the same behaviour (ajax dissabled this time) - the form in the modal is turned automatically into some ajax thing - if I submit it empty, the validation is happening only server side, not client side.

After Modal submit

Am I missing something else?

Comment #9

jrockowitz CreditAttribution: jrockowitz as a volunteer and at Webform module Open Collective, The Big Blue House commented 2 February 2023 at 15:06

Could you let me know if you are using a custom theme? What happens with Bartik or Olivero?

Is anything being logged in the browser's JS console?

Did you enable the webform_clientside_validation.module?

Comment #10

Schoenef CreditAttribution: Schoenef for flowconcept solutions commented 2 February 2023 at 15:58

File	Size
Screenshot 2023-02-02 at 16.58.06.png	46.08 KB

I'm using a custom theme indeed - I just switched to Olivero, but the behaviour is also the same:

Olivero Errors

I have Webform Clientside Validation, Clientside Validation jQuery and Clientside Validation modules enabled. The console shows no errors, it only logs the Ajax POST request on submit (Brave Browser).