Home › Toolset Professional Support › [Resolved] Message handling / class
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 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)
Tagged: Content-submission forms, CRED API, Toolset Forms
Related documentation:
This topic contains 8 replies, has 2 voices.
Last updated by matthiasG 6 years, 9 months ago.
Assisted by: Minesh.
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
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.
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
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?
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.
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.
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
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.
Works 🙂 Thanks