Skip Navigation

[Resolved] Message handling / class

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

Problem:
How to add custom class name to jQuery/javascript error message generated using CRED form to validate the form

Solution:
The easiest way to add custom class name to jQuery/Javascript error message generated by CRED form is to add custom javascript/jQuery code.

You can find proposed solution, in this case, with the following reply:
=> https://toolset.com/de/forums/topic/message-handling-class/#post-620543

Relevant Documentation:

This support ticket is created 6 years, 9 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
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 8 replies, has 2 voices.

Last updated by matthiasG 6 years, 9 months ago.

Assisted by: Minesh.

Author
Posts
#620368

Tell us what you are trying to do?
I need some custom class at the error message box.

<small for="cred_user_form_171_1-textfield-2-1519803115" generated="true" class="wpt-form-error">This field is required</small>

Maybe some hook i can use? Like https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_override_auth_errors

Or a Jquery solution?

Is there a similar example that we can see?
Here its possible to add a class to the auth errors
https://toolset.com/forums/topic/wpv_filter_override_auth_errors-creating-issue-for-success-messages/

Best Regards

#620511

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Well - the filter you shared "wpv_filter_override_auth_errors" will be applied when:

This filter is applied when WordPress login authorization fails. It allows you to override the error messages or add custom styling through CSS class to the error messages.

Are you using login form?

The best way to deal with this case is to use some custom jQuery to add class to your targeted elements.

#620514

As you see in the HTML Code its a CRED form field. So no i don't need it for login.
I need it for CRED to create content.

I can't manipulate via normal jquery like

 $('.wpt-form-error').addClass('CLASSNAME');

Cause the error only shown if user press the submit button. (append to html)

Best regards

#620516

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

When you say submit button - you want to display error when submitting the form?
If yes:
CRED offers hook to validate the form: cred_form_validate
=> https://toolset.com/documentation/programmer-reference/cred-api/#cred_form_validate

Does this help?

#620517

This hook come after the jquery / ajax validation?
So if customer press submit, it shows whiteout new loading the error message.

1. User press submit
2. Site stays / don't load new
3. Error show -> This field is required

And i wand to add to this error box a new class.

#620521

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Yes - that filter will be hooked when you submit the form successfully after jquery validations are passed.

If you want to add class before the jquery validations are fired. I would love to help you further but for that I need problem URL and access details and what class name you want to add to which element?

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

#620523

Sorry, i don't get why you need access?
Is the normal CRED form with normal field.

Yeah and as i told you. I want to add class to the error message before it save.
As i see it happens here /plugins/types/vendor/toolset/toolset-common/toolset-forms/lib/js/jquery-form-validation/jquery.validate.js

Best would be for me, if a dev can tell me how to trigger the validation and add my custom post after validation is done.

Best regards

#620543

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Could you please try following code. Try to add following JS code to your CRED form's JS box:

jQuery(document).ready(function($){

$("div.js-wpt-field-items").on('DOMNodeInserted', function(e) {
    if ( $(e.target).hasClass('wpt-form-error') ) {
    	$(e.target).addClass("classname");
    }
});

});

Where
- Change "classname" with the original class name you desired.

#620551

Works 🙂 Thanks