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
#20	default.pnp_.png	115.65 KB	jrockowitz
#20	inline_form_errors.png	117.44 KB	jrockowitz
#20	clientside_validation.png	123.05 KB	jrockowitz
#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

Comments

Comment #1

30 January 2023 at 12:00

Schoenef created an issue. See original summary.

Comment #2

schoenef commented 30 January 2023 at 12:16

Issue summary:

View changes

Comment #3

schoenef 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 commented 1 February 2023 at 19:43

Status	File	Size
new	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 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 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 commented 2 February 2023 at 10:20

Status	File	Size
new	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 commented 2 February 2023 at 10:36

Status	File	Size
new	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 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 commented 2 February 2023 at 15:58

Status	File	Size
new	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).

Comment #11

jrockowitz commented 2 February 2023 at 16:00

Maybe try updating to Webform 6.2.x?

Comment #12

jrockowitz commented 2 February 2023 at 16:01

BTW, you should inspect the FORM and make sure there is no "novalidate' attribute on the FORM tag.

Comment #13

jrockowitz commented 26 May 2023 at 00:42

Status:

Active

» Closed (cannot reproduce)

Comment #14

akmalfikri commented 27 October 2023 at 07:14

I can reproduce this issue.

Steps :

Requirements
1. Client side validation module & jquery
2. Webform client side validation submodule

1. Create a webform
2. Add the webform link via dialog in any page
3. Click the button
4. Click submit

Errors will be displayed in messages, not inline.

For reference : https://youtu.be/KClbJAXly7I

Comment #15

liam morland

English

Ontario, CA 🇨🇦

commented 27 October 2023 at 13:59

Version:	6.1.4	» 6.2.x-dev
Status:	Closed (cannot reproduce)	» Active

Does this happen on the latest development version of 6.2.x?

Comment #16

r_cheh commented 4 January 2024 at 11:16

Yes, I have the same issue, form has attribute novalidate="novalidate", and inline validation don't work

Comment #17

jrockowitz commented 8 April 2024 at 22:33

Priority:	Major	» Normal
Status:	Active	» Closed (cannot reproduce)

I can't replicate this issue. If a theme or patch adds the novalidate attribute to the form tag, clientside validation will not work as expected.

Comment #18

mstrelan commented 7 June 2024 at 01:02

Status:

Closed (cannot reproduce)

» Active

This is fairly simple to reproduce.

Install Drupal 10.3 with standard profile
Install Webform 6.2.x and enable Webform and Webform UI
Enable ajax on the default contact form at /admin/structure/webform/manage/contact/settings
View the form at /form/contact and notice there is no novalidate attribute
Submit the form without populating any fields and notice the ajax validation

Comment #19

jrockowitz commented 27 June 2024 at 09:48

For #18, I do not see any reasonable fix because the submit callback is being triggered via a click event, which doesn't trigger validation.

@see https://git.drupalcode.org/project/webform/-/blob/6.2.x/src/Form/Webform...

The best workaround is to use https://www.drupal.org/project/clientside_validation

Comment #20

jrockowitz commented 7 September 2025 at 13:21

Version:	6.2.x-dev	» 6.3.x-dev
Component:	Code	» JavaScript / Ajax
Status:	Active	» Postponed (maintainer needs more info)

Status	File	Size
new	clientside_validation.png	123.05 KB
new	inline_form_errors.png	117.44 KB
new	default.pnp_.png	115.65 KB

I reviewed the comments on this ticket and can't reproduce the UI/UX using #14. My best guess is that the issue is related to a custom theme. Keeping in mind that the Webform module does not support HTML5 validation via modal dialogs

My steps to review dialog validation using Webform 6.3.x, Drupal 11.x, and Oliverio are...

Using Clientside Validation

Install webform with webform_clientside_validation
Enable Site wide dialogs (/admin/structure/webform/config(
Copy dialog link from /admin/structure/webform/manage/contact/settings
Add this link to a new node's body source using 'Full HTML' (/node/add/page)
View the node
Click the link
Submit the webform
Get the below screenshot

Clientside validation

Using Inline Form Errors

Uninstall the Clientside Validation module (/admin/modules/uninstall)
View the same node
Click the link
Submit the webform
Get the below screenshot

Inline form errors

Using Default Form Validation

Uninstall the Inline form errors module (/admin/modules/uninstall)
View the same node
Click the link
Submit the webform
Get the below screenshot

Default errors

If someone can reproduce and expect UI/UX using the above validation, please provide the steps required to produce the issue using a similar setup.

Comment #21

mstrelan commented 9 September 2025 at 22:35

The issue title "Ajax enabled Webform ignores client side form validation" can be reproduced following #18. I think you're saying in #19 that's not possible, so I guess this should be wont fix / works as designed?

Comment #22

jrockowitz commented 9 September 2025 at 23:24

Status:

Postponed (maintainer needs more info)

» Closed (won't fix)

Yeh, I think this is "wont fix / works as designed"

Comment #23

9 September 2025 at 23:24

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.

Ajax enabled Webform ignores client side form validation

Problem/Motivation

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Comments

Comment #1

Comment #2

Comment #3

Comment #4

Comment #5

Comment #6

Comment #7

Comment #8

Comment #9

Comment #10

Comment #11

Comment #12

Comment #13

Comment #14

Comment #15

Comment #16

Comment #17

Comment #18

Comment #19

Comment #20

Using Clientside Validation

Using Inline Form Errors

Using Default Form Validation

Comment #21

Comment #22

Comment #23

News items

Our community

Documentation

Drupal code base

Governance of community