Support

Account

Register Login

Home › Forums › Front-end Issues › Custom Validation

Solved

Custom Validation

  • I’ve been following the “Using acf_form to create a new post” tutorial and everything is working great.

    I’d like to perform some custom validation on 2 of my fields to check that they are both the same.

    • email
    • confirm_email

    How would you suggest going about this? I could use the “acf/pre_save_post” filter and bounce it back, but that seems clunky. Can I hook into the javascript validation that your code is providing?

    thanks!!

  • Hi @locomo

    Thanks for the question. You can use a JS filter to hook in and run validation on any field! This is not yet documented but does work.

    Use it like so:
    * Note, this is jQuery

    
$(document).on('acf/validate_field', function( e, field ){
	
	// vars
	$field = $(field);
	
	
	// set validation to false on this field
	if( $field.find('input').val() == 'test' )
	{
		$field.data('validation', false);
	}
		
});

  • You can see how this works in the js/input/validation.js file on line 168

  • awesome – thanks .. I’m able to get this to work.

    because this is triggered on every field my solution is a littly wonky for my specific use case (comparing values of 2 fields) – i had to traverse back up to the field’s parent to look for another field’s value

    I’m wondering if in a future version you could add an additional hook that would be triggered after you loop through each required field so that other explicit validation conditions could be checked

    either way I’ve got something working and I love this plugin!!

  • actually one other quick question – using this hook could I also change or add to the error message?

    currently it displays: “Validation Failed. One or more fields below are required.”

    I’d like to add something like – “Your email addresses do not match”

  • Hi @locomo

    Sure, you will find that string in the acf.l10n (js) object!

    Cheers
    E

  • Trying to add some custom .js validation (as per the above) on a front end form, but can’t get it to work. Where should this code go?

    I’ve tried adding inline on the form page, and also as a separate script via wp_enqueue_scripts action, but no joy?

    Thanks!

  • @Sarah
    i added it from a custom plugin like this:

    add_action( 'wp_enqueue_scripts', 'my_enqueue_styles_scripts' );
function my_enqueue_styles_scripts() {
    wp_enqueue_script( 'acf-custom-validation', plugins_url( 'inc/js/acf-custom-validation.js', __FILE__ ), array( 'acf-input' ) );
}

  • @locomo – thanks!

  • Hi, Can you post an example of the full code. I’m really struggling..

    $field = jQuery( 
What should I write here - Field type, name, id ? with quotes or without ? 
);

    And should I change the field here or location of acf/validate_field:
    jQuery(document).on('acf/validate_field', function( e, field ){

    I want to get a simple dummy false validation to check if it is working:

    jQuery(document).on('acf/validate_field', function( e, field ){
	$field = jQuery(field);
	$field.data('validation', false);
});

    Notes:
    I have hooked the .js file like this:

    add_action( 'wp_enqueue_scripts', 'my_enqueue_styles_scripts' );
function my_enqueue_styles_scripts() {
	wp_enqueue_script( 'acf-custom-validation', get_template_directory_uri() .'/js/acf-validation.js', array( 'acf-input' ) );
}

  • in your example it would look like this – but i think it will fire on every field in your form so you’d want to select for the specific field you want to validate:

    jQuery(document).on('acf/validate_field', function( e, field ){

	var $field = jQuery(field);
	$field.data('validation', false);

});

    have you confirmed your .js file is definitely being enqueued and is in the correct location?

  • does this still work? or should I follow this document http://www.advancedcustomfields.com/resources/acf-validate_value/?

  • not sure – i haven’t tested this on version 5 yet

  • @ucheng for ACF 5 you need to use the acf-validate_value filter. I wrote a plugin called Validated Field that wraps other field types to provide server side validation, uniqueness queries, etc.

    It has just been updated to support ACF 5, could use some help testing it if you want to give the latest beta version a try: https://wordpress.org/support/topic/validated-field-34-beta

    Edit: ACF 5 Support and many new features available from https://wordpress.org/plugins/validated-field-for-acf/

  • Im using acf/validate_valuepassing wp_check_filetype to make sure images uploaded via a front end form are image types, the code below is working perfectly on the front end, however when I go to publish the post created by the form in the backend (as its automatically saved as a draft) I get the error message for when it is not a accpeted file type , when it is.

    My question is how do you use acf/validate_value to check that the file uploaded is an image type, I am using the Basic file uploader so guests can upload images 

    //FORM IMAGE VALIDATION
add_filter('acf/validate_value/name=image_upload', 'my_acf_validate_value', 10, 4);
function my_acf_validate_value( $valid, $value, $field, $input ){
	// bail early if value is already invalid
	if( !$valid ) {
		return $valid;	
	}
	$filetype = wp_check_filetype($value);
	$filetypeext = $filetype['type'];
	if( $filetypeext != 'image/jpeg' && $filetypeext != 'image/gif' && $filetypeext != 'image/png' && $filetypeext != 'image/bmp'&& $filetypeext != 'image/tiff' && $filetypeext != 'image/jpg') {
		$valid = "Please upload a valid image file!";
	}
	// return
	return $valid;
}

  • I recently noticed this too – I think it’s related to using the basic uploader vs wp media gallery rather than frontend/backend. Before I go further, you can also control the allowed file types in the Field Group Editor for your image field, you don’t have to use a custom filter.

    The value that is passed to the filter from the basic uploader is “C:\fakepath\image.jpg” (I have a Mac, so it’s really a fake path. Going through the Media Gallery it has already uploaded the file, then passes the attachment ID to the filter, so for example 123.

    If you do want to use your custom filter you would just need to check to see if the value is numeric or not, and if it is fetch the attachment (which should already have the file type).

    
if ( !empty( $value ) && is_numeric( $value ) ){
	// https://codex.wordpress.org/Function_Reference/get_post_mime_type
	$mime_type = get_post_mime_type( $value );
} else {
	// use the filename
	$fileinfo = wp_check_filetype( $value );
	$mime_type = $fileinfo['type'];
}

if( !in_array( str_replace( 'image/', '', $mime_type ), array( 'jpeg', 'gif', 'png', 'bmp', 'tiff', 'jpg' ) ) ){
    $valid = "Please upload a valid image file!";
}

  • Thanks so much

    I set up allowed file types in custom fields backend however it doesn’t seem to validate when I use the basic uploader.

    Why does t need to check if it’s numeric?

  • @tararotten In that case the code I posted should work for the front end basic uploader, and the admin media gallery. If you upload using the basic uploader, you will get the filename (not numeric) but if you use the media gallery you will get the attachment id (numeric). By checking to see if the $value is numeric you can determine how to get the mime type so you can validate it.

  • When using acf_form with 'form' => false, it seems there’s no acf/validate_value/name=... being called and you’re on your own. I’m trying to get ACF fields and multi-currency plugin fields to work with WC Vendors, and some validation needs plain old jQuery. It works fine, but is there a way to call that filter yourself with 'form' => false?

  • is it steel work?

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘Custom Validation’ is closed to new replies.