Validation of ajax forms with class 'cv-validate-before-ajax' doesn't work
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.
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.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | clientside_validation-fix-validate-before-form-submit-by-ajax-3260653-2.patch | 969 bytes | khiminrm |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
khiminrm commentedComment #3
khiminrm commentedComment #4
nikunjkotechaHi Roman,
It seems it's not clear enough in the code but expectation is to have the class at the element level and not form level. Reason to have it at element level is to allow specifying for each button / element separately.
May be we can update the documentation + happy to support both (class at form level and button / element level).
Comment #5
redneko commentedHi, 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.
Comment #6
inversed commentedThis 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:
$formorelementComment #9
inversed commentedI 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.
Comment #10
inversed commented