Ajax enabled Webform ignores client side form validation

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.

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 🐛 Cientside validation errors revert to being output as a label in webform wizard pages with ajax enabled Active
@see 🐛 Once is not well implemented Fixed

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

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!

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

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/contact" 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.

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.

Am I missing something else?

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?

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

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).

Maybe try updating to Webform 6.2.x?

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

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

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

Yes, I have the same issue, form has attribute novalidate="novalidate", and inline validation not working

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.

This is fairly simple to reproduce.

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

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 →

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.

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

• 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

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

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

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.