Hi, I am building a post form with CRED which needs customized conditions for fields to be required. Such conditions for instance involve the user's role or other fields that are not available directly from the concerned form but need separate database queries. The display conditions set in the "Edit Post Field Group" can not be used for that purpose.
I am using the CRED validation hook to check if these conditions are fulfilled. However, the error messages from this hook are now all coming together in a top window in the CRED form. This is not user friendly, especially for forms with complex structures. You can not expect the user to retain all that information while scrolling down the form.
I need to have the error messages displayed individually near the field labels, just like what a conditional display set up in the "Edit Post Field Group" would do. In my older CRED version, error messages actually displayed close to the fields. So, I tried with the "cred_filter_field_before_add_to_form" hook but I don't see how to create conditions involving other fields from the current form from within this filter since fields are filtered one by one through it.
On the side, I would like to take the opportunity of this ticket to make a suggestion of improvement. It would be much better in my opinion to dissociate in the "Edit Post Field Group" the "required" from the "display" and make two separate conditions: one condition for being required and one condition for being displayed. Because you want to be able to display a field which is optional in some cases (ie visible but not required) and required in other cases. If you had to keep only one of those, I would only keep the condition for being required, and not for being displayed. This is because the display on forms can be adjusted anyway with the conditional groups in CRED.
I need to have the error messages displayed individually near the field labels, just like what a conditional display set up in the "Edit Post Field Group" would do.
Using the wpt-form-error class on a label element, you can add your own custom inline error messages as described here:
https://toolset.com/documentation/user-guides/styling-cred-forms/
The code samples in that document are formatted with incorrect quotation marks. I've asked our documentation team to fix that. In the meantime, here's a working example you can copy + paste as a template:
<label id="category" class="wpt-form-error">
This category selection is invalid.
</label>
On the side, I would like to take the opportunity of this ticket to make a suggestion of improvement.
May I kindly ask you to open a separate ticket for your suggestion? This way we can discuss the details of how it should work and talk about next steps, and keep the forum organized. When you create a new ticket, you can choose "I want to suggest an improvement" and add your thoughts there. Thanks for helping us keep things tidy here.
Hi Christian,
Thanks. When I enter the following:
<div class="form-group">
<label id="wpcf-firstname" class="wpt-form-error">
This category selection is invalid.
</label>
[cred_field field="firstname" post="registration" value="" urlparam="" class='form-control' output='bootstrap']</div>
</div>
I get the error message "This category selection is invalid" displaying on the form near the field at ALL times, ie already before submission. I have tried using id="wpcf_firtname" but with the same problem. I am using correct quotation marks. Should this piece of code be wrapped in another div class?
Thanks for your help!
Oh, my mistake. I misread the documentation about that, it turns out you can style existing error messages using the wpt-form-error class, but not add your own custom ones. Currently the inline errors are limited to messages about required fields. If you'd like, I can submit this as a feature request to our developers. They will take it into consideration for development in a future release.
Yes please, it would be very useful.
Thank you. I am closing the thread but I am really looking forward to the future improvements on these form error messages!
