Validation of ajax forms with class 'cv-validate-before-ajax' doesn't work

Created on 26 January 2022, over 3 years ago
Updated 15 January 2024, over 1 year ago

Problem/Motivation

Validation of ajax forms with class 'cv-validate-before-ajax' doesn't work

Steps to reproduce

Create ajax form with some required fields. In our case ajax form is loaded by ajax in modal window. Add class cv-validate-before-ajax to the form by form_alter or in form's build method. Don't feel required fields and click on submit button. The form will be submitted by ajax and the validation errors should be shown. But the validation has to be done before the submission.

Proposed resolution

I debugged code in clientside_validation/clientside_validation_jquery/js/cv.jquery.validate.js and noticed that this.element in $(this.element).hasClass('cv-validate-before-ajax')) returns button clicked on the form. Replacing this.element with this.$form helps to fix the issue.

Remaining tasks

User interface changes

API changes

Data model changes

πŸ’¬ Support request
Status

Needs work

Version

3.0

Component

Code

Created by

πŸ‡ΊπŸ‡¦Ukraine khiminrm

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

Merge Requests

Comments & Activities

Not all content is available!

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

  • Hi, I was trying to adjust the configuration of the Clientside Validation module and ran into the same issue - I expected the class 'cv-validate-before-ajax' to cause a change in behaviour when add to the form, not an element. This is because on the configuration page for Clientside Validation jQuery it says "All forms with class "cv-validate-before-ajax" will be validated by default".

    When I went looking for more information, I found the issue where this was worked on β†’ , where I felt the discussion also implied that the class should be applied to the form. It wasn't until I found this issue that I realised that it just doesn't work that way.

    For me, it would be preferable to the class to trigger the expected behaviour when attached to the form. I would find it very useful for the feature to work as described.

  • πŸ‡ΊπŸ‡ΈUnited States inversed

    This patch fixes the specific issue I'm having, but it would break backwards compatibility with existing sites. I think the right solution would be to:

    • Adjust the patch to support either $form or element
    • Adjust the admin page help text to indicate how this works
  • πŸ‡ΊπŸ‡ΈUnited States inversed

    inversed β†’ changed the visibility of the branch 4.0.x to hidden.

  • Pipeline finished with Success
    about 8 hours ago
    Total: 189s
    #498422
  • πŸ‡ΊπŸ‡ΈUnited States inversed

    I created a Merge Request for this and you can download a patch from the diff if needed. Per the comment in #6, this makes the manually controlled pre-submit validation for AJAX submits check for the opt-in class in either the form or an element. It also updates the help text and the schema description to match.

    I did this against the 4.0.x branch as that is the current version. I updated this ticket accordingly.

  • πŸ‡ΊπŸ‡ΈUnited States inversed
Production build 0.71.5 2024