Skip Navigation

[Resolved] Form field validation using API hooks

This support ticket is created 3 years, 2 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
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9: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/Karachi (GMT+05:00)

This topic contains 9 replies, has 2 voices.

Last updated by Waqar 3 years, 2 months ago.

Assisted by: Waqar.

Author
Posts
#2170655

Hi, I want validate some form fields. For the custom fields created with Toolset, they are easy enough - just check the Required box in custom field settings. My challenge is with WP standard fields. I want to set post content text field (post_content) as required. So I found Forms API Hooks document that contains this code and applied that to my site:

add_filter('cred_form_validate', 'validate_form_wyswyg');
function validate_form_wyswyg( $data ) {
list($fields,$errors)=$data;
if (empty($fields['post_content']['value'])) {
$errors['post_content'] = 'Missing wyswyg';
}
return array($fields,$errors);
}
//

I added the above under Toolset settings Custom Code area and activated the snippet. I tested the form and there was no validation or error message shown for the empty field I want to target. I also added the above code to theme functions.php file and got no result either. I also want to validate the requirement for users on taxonomy checkbox field.

There are validation solutions out there, but they require to work with the form input tag directly. I can't use the conventional solutions because I'm stuck with Toolset form shortcodes in the form editor.

Please advise and thank you.

#2171613

Hi,

Thank you for contacting us and I'd be happy to assist.

In my tests, I was able to make the validation function work using this snippet:
( ref: https://toolset.com/documentation/programmer-reference/cred-api/#cred_form_validate )


add_filter('cred_form_validate','my_validation',10,2);
function my_validation($error_fields, $form_data)
{
	//field data are field values and errors
	list($fields,$errors)=$error_fields;
	//validate if specific form
	if ($form_data['id']==12345)
	{
		// empty check for 'post_content' field
		if(empty($fields['post_content']['value']))
		{
			//set error message for 'post_content' field
			$errors['post_content']='This value can not be empty';
		}

		// empty check for 'book-category' field
		if(empty($fields['book-category']['value']))
		{
			//set error message for 'book-category' field
			$errors['book-category']='This value can not be empty';
		}
	}
	//return result
	return array($fields,$errors);
}

In this example code snippet, it will check the submission for the form with ID "12345" and will show error messages, if the post content field or the checkbox field for the taxonomy "book-category", is empty. Feel free to change these values as needed on your website.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

#2171695

Thanks for the reply and code snippet, Waqar.

It doesn't seem to work on my end. I believe I replaced the variables correctly. When I hit the form submit button without filling out any field, the error message only appear for those fields I could set as required in Toolset custom field settings. No error message for the post body field or category checkboxes. I even test the code on one of custom fields that doesn't have required setting on and no error message either.

I can give you access to the site to have a look at my setup.

/ steven

#2171705

Thanks for writing back.

Can you share temporary admin login details, along with the link to the page where this form can be seen?

Please, also include the information where this code snippet can be seen on the website.

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

#2171907

Thank you for sharing these details.

I've checked the code snippet and it seems to be added correctly.

I checked the form and I do see the validations message coming from that snippet. I just had to ensure that all the required fields were filled.
( screenshot: hidden link )

It is important to note here that the validation is handled at multiple levels:

1. At the first basic level, if any of the required fields are not filled, you'll immediately see a warning about those fields. At this level, because the form's data submission has not been allowed, the validation attached through the "cred_form_validate" hook, is not applied.

2. If the first basic level validation is passed (i.e. all required fields have been filled), then the form's data is submitted for evaluation through any custom validations rules added through the "cred_form_validate" hook.

If any rule from the custom validation is not passed, respective error(s) is shown, otherwise, the form's data submission is completed.

#2172221

Thanks for testing out my setup, Waqar. I see how it works that the first group of required fields need to pass before the ones with custom setup are triggered and throw the warning message. I could reproduce what you showed in screenshot.

I like that the warning message pops up next to each of the basic required field when not filled in. This helps the user quickly to identify the required fields. The warning message for custom validation fields shows up at the bottom of the form. While the code snippet does its job, a little short coming is that the bottom warning message creates an inconsistency of presentation and potential confusion for users as it may not be obvious to them which fields they have missed.

I wonder if there's away for custom validation warning message to show up next to the relevant fields the same way basic required fields work?

#2172245

One more thing on top of my last message.

The custom validation message reads:
"Submission Content: This field is required."

There are two parts, the field name reference and message text. In the former part, I'm not sure where the script grabs the field name from. This is also concerning because I have the field labeled differently in the front end for better user experience. So if the reference field name in warning message does not match the labeling I have, plus the warning message not showing up next to the required fields, this would likely to create user confusion as they would have trouble finding out which fields they need to fill in.

Thank you.

#2173703

Thanks for the update and glad that it is working now.

1. I'm afraid, there is no built-in feature available to make the custom validation error messages, show inline with the fields too.

I see that you've added the form messages ( [cred_field field='form_messages' class='alert alert-warning'] ) on top of the form, which makes them hard to miss. As your form is fairly long, you can repeat this field above the form's submit button too, so that these warning messages are shown on top and at the bottom of the fields, making them even harder to miss.

2. The first part of the custom validation error message is picked from the field's original name and not what is saved in the form's setting as a label.

There is a workaround that you can use to hide the first part of the message and only show your own custom text:

a). You can wrap your custom error message text in a 'span' tag and also include the label of the target field.

For example for the post content field, the line for the error message is currently:


$errors['post_content']='This field is required.';

And you can change it to:


$errors['post_content']='<span>Description of Intervention or Resource field is required.</span>';

b). In the form's custom CSS code, you can include some CSS code that hides that default error message text and only shows the custom text, that is included in the 'span' tag.


.cred-form .wpt-form-error ul li {
	display: block;
	line-height: 0px;
	color: transparent;
}

.cred-form .wpt-form-error ul li span {
	display: block;
	line-height: 25px;
	color: #aa0000;
}

#2174533
Screen Shot 2021-09-20 at 7.16.48 PM.png

Waqar, your suggestion of handling the error message is a workable solution. Hiding the data field native name with CSS creates some spacing issue though with additional refinement, I could get the layout to display decently. See attached screenshot.

Hopefully in future version, Toolset form offers more control of WP standard fields because inevitably these field would need to work along with the custom fields more consistently.

thank you

#2174759

Thanks for the update and glad that the workaround helped.

You've made a good point about the handling of built-in WordPress fields and you're welcome to share feedback and suggestions at:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

For any new questions or concerns, please start a new ticket - we're here to help.