Skip Navigation

[Resolved] CRED form taxonomy validation jQuery conflict.

This support ticket is created 6 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 3 replies, has 2 voices.

Last updated by Christian Cox 6 years, 11 months ago.

Assisted by: Christian Cox.

Author
Posts
#595339

Okay here is another from my pet project.

I have successfully implemented taxonomy validation using this in my functions.php

/* Make Product taxonomy in CRED forms required */
add_filter('cred_form_validate','my_validation',10,2);
function my_validation($field_data, $form_data)
{
// field data are field values and errors
list($fields,$errors)=$field_data;
// print the field values
// print_r($fields);
// validate if specific form
if ($form_data['id']==117)
{
if (empty($fields['product-category']['value']))
// set error message per field
$errors['product-category']='Моля изберете продуктова категория!';
}
// return result
return array($fields,$errors);
}

However this is breaking my jQuery magic which I used to customise the Taxonomy select field.

function cureform(){
  jQuery("select[id^='cred_form_117_2-select-1']").removeAttr( "multiple" ); 
  jQuery("select[id^='cred_form_117_2-select-1']").prepend('<option value="" selected disabled hidden>-- ИЗБЕРИ КАТЕГОРИЯ --</option>');
  jQuery("select[id^='cred_form_117_2-select-1'] > option[value^='43'], select[id^='cred_form_117_2-select-1'] > option[value^='49'], select[id^='cred_form_117_2-select-1'] > option[value^='66'], select[id^='cred_form_117_2-select-1'] > option[value^='59'], select[id^='cred_form_117_2-select-1'] > option[value^='25'], select[id^='cred_form_117_2-select-1'] > option[value^='29'], select[id^='cred_form_117_2-select-1'] > option[value^='43'], select[id^='cred_form_117_2-select-1'] > option[value^='47'], select[id^='cred_form_117_2-select-1'] > option[value^='27'], select[id^='cred_form_117_2-select-1'] > option[value^='74']").attr( "disabled","true" );
};
jQuery(document).ready(cureform);

Here is a video recording of my screen where I show my Taxonomy situation:
hidden link

Please notice:
1) My jQuery cureform() function works as expected in the beginning. It shows a default disabled option "-- ИЗБЕРИ КАТЕГОРИЯ --", also transforms the multi-line select to a drop-down select. AND also with this long list of selectors I disable my Parent product categories so they are not selectable.
2) Upon trying to add a product without picking up a Taxonomy the form fails to validate and outputs the error message, HOWEVER this breaks my magic cureform() function and makes it possible for users to select multiple categories or select Parent categories(as show in second half of video).

PS. I am open for improvements on that long jQuery value selector also.

#595432

Okay so it looks like the problem occurs whenever the form is submitted with AJAX. When the AJAX response is received, the form's fields are replaced in the DOM with new form fields defined in the AJAX response. This deletes the changes you already made with jQuery when the "cureform" function was initially called. The only way to resolve this is to reinitialize these custom inputs after the AJAX update by calling "cureform()" again.

The next problem is CRED does not have a JavaScript API, so there's not a good way to trigger this JavaScript after an AJAX update. No documented events are available for you to hook into to call "cureform()" again. Normally I would recommend just disabling AJAX for this form, but that's a problem in your case because the form is shown in a modal. Refreshing the page would probably hide the modal. This is a problem without a straightforward solution, unfortunately, without a JS API for CRED.

I can think of some other options. You might be able to use jQuery.ajaxSuccess (hidden link) to trigger your cureform function after the form is updated, but that's not something I would be able to support or assist with here in the forum. Or, you might be able to disable AJAX on this form and use URL parameters somehow to automatically show the modal after page is refreshed upon a validation error. Or, you might be able to disable AJAX on the form and use an iframe in the modal to display the form - this would refresh the contents of the iframe only without refreshing the whole parent page after the form is submitted. It would require creating a page template in PHP to display only the CRED form and not the rest of your site contents, which can be challenging.

Let me know your thoughts and I'll do what I can to assist.

#595556

Hi Christian,

Thanks for your detailed input on this topic.

I will try experimenting with jQuery.ajaxSuccess first, this sounds like an optimistic and straight-forward possibility for a fix.

I will delve deeper into this as time allows and will let you know if I have a working solution.

D.

#595707

Okay sure, I'll mark this ticket as pending an update from you. No need to reply right now. The ticket will remain active for 30 days.