acf_form with custom validation message

• thefreshlab

• April 21, 2016 at 6:05 pm

I am working with acf_form on a front-end page that allows the user to update their password. I have two fields: New Password and Confirm New Password.

I have used jQuery to check if the values of the fields match but I can’t update the validation message if the user enters incorrect data.

I would like to change:
Validation Failed. One or more fields below are required.

to:
{MY MESSAGE HERE}

I know the string is within: acf.l10n but I do not know how to change this (jQuery newbie). Please can someone point me in the right direction or offer some advice on how to update the default message?

Thanks.

• John Huebner

• April 21, 2016 at 9:34 pm

ACF already does validation and you can validate one field against another field using those filters. Here’s an example

add_filter('acf/validate_value/name=password2', 'my_validated_password_filter', 10, 4);
function my_validated_password_filter($valid, $value, $field, $input) {
  if (!$valid) {
    return $valid;
  }
  // field key of the field you want to validate against
  $password_field = 'field_0123456789abc';
  if ($value != $_POST['acf'][$password_field]) {
    $valid = 'Does Not Match Password';
  }
  return $valid;
}

• thefreshlab

• April 21, 2016 at 11:42 pm

Thanks John for getting back to me.

I have tried this with out success. I’m not sure this works on the front-end (not within admin) when using acf_form() – or should it?

• thefreshlab

• April 21, 2016 at 11:43 pm

…deleted…

• John Huebner

• April 22, 2016 at 1:01 am

It should work on the front end as well as the back end.

Check you acf_form setup. Are you calling acf_form_head(); before get_header(); and make sure that your theme is also calling wp_footer(); If something here is wrong it could be causing the JS to error.

Another thing is that if you have the field marked as required then if it’s left blank you’ll get the standard ACF error message. If you want to completely override that remove the check at the top of the function that returns if the field is already not valid

add_filter('acf/validate_value/name=password2', 'my_validated_password_filter', 10, 4);
function my_validated_password_filter($valid, $value, $field, $input) {
  // field key of the field you want to validate against
  $password_field = 'field_0123456789abc';
  if ($value != $_POST['acf'][$password_field]) {
    $valid = 'Does Not Match Password';
  }
  return $valid;
}

• thefreshlab

• April 22, 2016 at 2:40 am

Hey John,

Unfortunately, I can confirm that I have acf_form() before get_header() and my theme is calling wp_footer().

I have tried removing the required fields but that didn’t make any difference.

Also, I don’t get any JS errors in chromes console…

I guess it’s not going to work. Thanks your your suggestions.

• John Huebner

• April 22, 2016 at 5:51 am

I just did a test on one of my test sites to make sure it was working and I wasn’t mistaken about it working on the front end.

I created to fields text1 and text2, but it should work with any 2 fields

 
add_action('acf/validate_value/name=text1', 'validate_2_fields', 10, 4);
function validate_2_fields($valid, $value, $field, $input) {
  $second = 'field_57192c0b5b1ee';
  if ($value != $_POST['acf'][$second]) {
    $valid = 'values must match';
  }
  return $valid;
}

There is one other thing that might cause it, and that’s a php error during the ajax call, but if you’re getting the standard error for a required field being left blank then that’s not the case.

Check the field names/keys to make sure you’re using the right ones. The only other thing I can think of is that the fields are part of a repeater or some other nested type of field, but that doesn’t seem likely.

The last thing to check is the field names, try changing them. The names of fields can possibly cause issues, but I’m really stretching for possible solutions.

If everything still looks okay then you’ve probably got some other plugin or something causing a conflict. Try disabling plugins or changing themes to see if that clears up the problem.

• thefreshlab

• April 22, 2016 at 6:31 pm

Hey John, thanks for double checking this for me… I’m sure it’s something to do with my theme – although I have no idea how to debug the issue.

One thing just to clear up, I am using this jQuery to check the validation – could this be the reason the filter isn’t working:

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

	// Validate New Password fields
	$(document).on('acf/validate_field', function(e, field){
		
		// vars
		$field = $(field);
		$new_password = $('#acf-field-new_password').val();
		$confirm_password = $('#acf-field-confirm_new_password').val();
		
		// set validation to false on this field
		if($new_password != $confirm_password) {

			$field.data('validation', false);

		}
			
	});

});

• John Huebner

• April 22, 2016 at 9:42 pm

It probably has something to do with not using the standard method of validation. You’re either going to need to produce and output the error in your custom script or remove it and let ACF deal with it normally. I tend to only build custom code when it’s something I can’t do with a simple ACF filter.

• neelshah6892

• September 16, 2020 at 11:34 pm

This reply has been marked as private.