Cientside validation errors revert to being output as a label in webform wizard pages with ajax enabled

Created on 3 February 2020, almost 5 years ago
Updated 30 January 2023, almost 2 years ago

I have a wizard style webform with ajax enabled to load each wizard page. I'm using clientside validation with the jquery validation plugin. In the clientside validation jquery settings, I have enabled the option "Validate all forms before AJAX submit".

On the first page of the webform, clientside validation works fine and generates an inline error message after the invalid input with the correct markup:

<div class="form-item--error-message">
  <strong id="question_1-error" class="error">You must choose an answer.</strong>
</div>

But on the second page of the webform (loaded in via ajax), the clientside validation partially breaks. It still generates an inline error message - but the markup seems to revert to the default for the jquery validation plugin which is to wrap the error message in a label:

<label id="question_2-error" class="error" for="question_2">You must choose an answer.</label>

I think this may be caused by these lines in cv.jquery.validate.js towards the end of that file:

$(context).find('form').each(function() {
  $(this).validate(drupalSettings.cvJqueryValidateOptions);
});

On the first page of the wizard webform, context is the entire document object. But when the second page of the webform is loaded in via ajax, context becomes the form itself and the lines above do not run.

To fix I modified the above lines so that it always looks for forms within the document object:

$(document).find('form').each(function() {
  $(this).validate(drupalSettings.cvJqueryValidateOptions);
});

This solved the issue for me. Patch attached.

πŸ› Bug report
Status

Active

Version

3.0

Component

Form Validation

Created by

πŸ‡¬πŸ‡§United Kingdom Glugmeister

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024