Apply client side validation on forms submitted via ajax

Started with developer friendly code. Blockers:

• Drupal FAPI now supports partial fields validation based on limit_validation_errors, this will require lot of work in front end
• We definitely don't want to trigger validation before AJAX calls done on specific fields, we will need to find a way to understand which one is actually doing form submit (most of the time #ajax is directly added to submit button)
• We will also need to add code for multi-step forms or form fields in multiple field-sets / tabs which are hidden

Current code allows developers to trigger validation for specific cases. We need to have cv-validate-before-ajax class on the element in which AJAX is triggered and it only supports validating full form as of now.

I'll add current code to dev version as it is generic enough and is compatible with current code. Still need to add some documentation around this.

Later I would suggest to merge this with https://www.drupal.org/project/clientside_validation/issues/2949540 and start as separate sub-module.

I needed to figure out how to block an Ajax form from submitting and this code seems like the perfect solution.

@divined Thanks

The attached patch works for the latest dev version and moves the Ajax logic last so that the drupalSettings.cvJqueryValidateOptions can be applied to the Ajax submissions. I also removed the 'cv-validate-before-ajax' class because most users are going to expect that Ajax clientside validation just works as expected.

Right now clientside validation triggered for any Ajax submission (ie file uploads, add/remove items, etc...). In the webform module, I am examining the trigger element (this.element) and seeing if it is the form's action.

hi @jrockowitz

I'm not sure if we would want clientside validation for all the ajax forms, there are cases in projects I work where we simply rely on server side validations. There can be multiple reasons behind this - for us it is simply because HTML 5 default validation works for required field and we don't need to theme two different ways (clientside validation and server side validation)

Also, since we are not covering each and every case (it is not just webforms but views exposed form, forms from other contrib modules) we need to allow it to be skipped.

I see following steps further
1. Keep it as is - disabled by default
2. Make it enabled by default and allow disabling it
3. Add configuration to let it be decided per project (enable by default and exclude OR disable by default and apply to)

Do you have some time to take it further?

@nikunjkotecha Sorry, I missed your response. I need to focus my time on maintaining Webform. Hopefully, my patch is a good starting point for someone else to help resolve this issue.

Re-rolled patch #2 for 8.x-1.0 release.

I just tried #5 and is still applying and working as expected... and #12 is removing drupalSettings and some other lines not sure why.

So, the good one is still #5.

Thanks!

@gnuget: #12 is based on #2 (just re-roll), #5 applies it to all the forms which is not expected.

I will spend some time next week to add the settings and do it properly

It makes sense now.

Thank you for the clarification.

Updated my original patch to add a new configuration to enable it for all forms or just the ones with class. I'm going to merge this once tests pass.