Skip Navigation

[Resolved] Cred on error event

This thread is resolved. Here is a description of the problem and solution.

Problem:
Client has a CRED from with sections hidden in collapsible Bootstrap panels, and so needs to expand all panels if there is a validation error.

Solution:
There are no public custom front-end CRED events that can be used, but it is possible by adding the following jQuery in the custom JS section of the form:

jQuery(document).ready(function($){
  $(".cred-form").submit(function(e){
    e.preventDefault(e);
    $(".panel-group .collapse").collapse('show');
    $(this).submit();
  });
});
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.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 5 replies, has 2 voices.

Last updated by tinaH 6 years, 11 months ago.

Assisted by: Nigel.

Author
Posts
#608819

I want expand all bootstrap panels, if there is an error in a CRED form. (ajax enabled)

I need a javascript event to attach this script

jQuery(document).ready(function($){
   $(if there are errors in the form).something(function(){
	$(".panel-group .collapse").collapse('show');
  });
});

Do you have documentation for javascript events, CRED, views etc?

#608873

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Tina

I checked with the developers if there are any custom JS events that would be triggered by form invalidation and was told no, though it is an area of CRED that needs reviewing and improving.

We may be able to contrive a solution, but which form validation are you talking about, first?

Do you mean the Types validation that occurs on the front-end (e.g. where a Types field is required), or do you mean server side validation where you use the CRED API to include custom validation? And forms submit via page reload or ajax?

#608903

Front end, ajax submit.
If any errors in the form, that prevents it from being submitted, like required fields.

(I have grouped form fields in bootstrap accordion panels. If there are any errors in the form I need to expand all panels so the user can see all fields with errors).

I tried this but it does not fire in all browsers. Only Chrome is ok.

jQuery(document).ready(function($){
  $("form").submit(function(e){
	e.preventDefault(e);
	$(".panel-group .collapse").collapse('show');
	$(this).submit();
  });
});
#608918

I tied it to .cred-form instead of "form" and now it works in Firefox and Safari.
Strange ...

But still it would be great to get a list of CRED ajax events

#609331

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Tina

Yes, I can see how that works, because if there are no errors the form is submitted and the page updates and so expanding the panels is irrelevant.

Can't account for why using $("form") doesn't work in Safari an FF, though.

As I mentioned before, I spoke to the developers and they acknowledge that this is an area where CRED is lacking, and this code needs refactoring, at which point they can add custom JS events, but I can't say when that might happen.

#609880

🙂