[Resolved] Validation of image field in the user form in toolset

[Author]

Posts

[pramodk-2]

Hi Shane,

This code is working for user form.

In my post form, there are 3 image fields with the below slug names. Could you please tell me the code snippet for all these 3 fields for post form together in a single code.

1. Field slug one - property-image-one
2. Field slug two - property-image-two
3. Field slug three - property-image-three

Form ID : 85 & 702.

Please suggest.

Thanks.

[pramodk-2]

Hi Shane,

There are in total 5 fields slugs which needs similar validation.

1. Field slug one - property-image-one
2. Field slug two - property-image-two
3. Field slug three - property-image-three
4. Field slug four - property-image-four
5. Field slug four - property-image-five

Thanks.

[Shane]

Hello,

The simple solution is to extend the code for these field.

<?
add_action('cred_form_validate', 'validate_image_dimensions',10,2);
function validate_image_dimensions($error_fields, $form_data) {
  $forms = array( 805, 702);
      
  // Field data are field values and errors
  list($fields,$errors)=$error_fields;
  if (in_array($form_data['id'], $forms )) {
    $target_min_width = 150;
    $target_min_height = 150;

    if(isset($_FILES['wpcf-property-image-one']['tmp_name']) ){
      $check = getimagesize( $_FILES['wpcf-property-image-one']['tmp_name'] );       
      $file_size_uploaded=$fields['wpcf-property-image-one']['field_data']['size'];
      if ( $check !== false ) {
        // check the dimensions only, independent of the orientation.
        // if the height is greater than the width, switch the values for comparison.
        $width = ($check[0] >= $check[1]) ? $check[0] : $check[1];
        $height = ($check[1] < $check[0]) ? $check[1] : $check[0];   
        if ( $width < $target_min_width || $height < $target_min_height ) {
          $errors['property-image-one'] = __("Your image doesn't meet the minimum dimension requirements of 150*150 pixels");
        }elseif($file_size_uploaded > 6000000){
          $errors['property-image-one'] = __("Your Filesize is greater than 5mb please resize and try again.");        
        }
      }
    }
    if(isset($_FILES['wpcf-property-image-two']['tmp_name']) ){
      $check = getimagesize( $_FILES['wpcf-property-image-two']['tmp_name'] );       
      $file_size_uploaded=$fields['wpcf-property-image-two']['field_data']['size'];
      if ( $check !== false ) {
        // check the dimensions only, independent of the orientation.
        // if the height is greater than the width, switch the values for comparison.
        $width = ($check[0] >= $check[1]) ? $check[0] : $check[1];
        $height = ($check[1] < $check[0]) ? $check[1] : $check[0];   
        if ( $width < $target_min_width || $height < $target_min_height ) {
          $errors['property-image-two'] = __("Your image doesn't meet the minimum dimension requirements of 150*150 pixels");
        }elseif($file_size_uploaded > 6000000){
          $errors['property-image-two'] = __("Your Filesize is greater than 5mb please resize and try again.");        
        }
      }
    }
    if(isset($_FILES['wpcf-property-image-three']['tmp_name']) ){
      $check = getimagesize( $_FILES['wpcf-property-image-three']['tmp_name'] );       
      $file_size_uploaded=$fields['wpcf-property-image-three']['field_data']['size'];
      if ( $check !== false ) {
        // check the dimensions only, independent of the orientation.
        // if the height is greater than the width, switch the values for comparison.
        $width = ($check[0] >= $check[1]) ? $check[0] : $check[1];
        $height = ($check[1] < $check[0]) ? $check[1] : $check[0];   
        if ( $width < $target_min_width || $height < $target_min_height ) {
          $errors['property-image-three'] = __("Your image doesn't meet the minimum dimension requirements of 150*150 pixels");
        }elseif($file_size_uploaded > 6000000){
          $errors['property-image-thre'] = __("Your Filesize is greater than 5mb please resize and try again.");        
        }
      }
    }
  }
  $field_data = array($fields,$errors);
  //return result
  return $field_data;
}

Here is an example above using the 3 property images.

Please let me know if this helps.

Thanks,
Shane

[pramodk-2]

Hi Shane,

Tested with the code but not working.

Created a test form and recreated the issue and below are the details:

Admin credentials : Already provided in the same ticket chain.
Page : hidden link
Field group name:Media
Field slug name 1:property-image-one
Field slug name 2:property-image-two
Field slug name 3:property-image-three
Field slug name 4:property-image-four
Field slug name 5:property-image-five
Form ID : Test form 2 (ID: 1261)
Snippet name : post_form_image_validation

<?php
/**
 * Validation of post image field size and dimensions
 */
toolset_snippet_security_check() or die( 'Direct access is not allowed' );
add_action('cred_form_validate', 'validate_image_dimensions_post_form',10,2);
function validate_image_dimensions_post_form($error_fields, $form_data) {
  $forms = array( 1261);
       
  // Field data are field values and errors
  list($fields,$errors)=$error_fields;
  if (in_array($form_data['id'], $forms )) {
    $target_min_width = 350;
    $target_min_height = 350;
 
    if(isset($_FILES['wpcf-property-image-one']['tmp_name']) ){
      $check = getimagesize( $_FILES['wpcf-property-image-one']['tmp_name'] );       
      $file_size_uploaded=$fields['wpcf-property-image-one']['field_data']['size'];
      if ( $check !== false ) {
        // check the dimensions only, independent of the orientation.
        // if the height is greater than the width, switch the values for comparison.
        $width = ($check[0] >= $check[1]) ? $check[0] : $check[1];
        $height = ($check[1] < $check[0]) ? $check[1] : $check[0];   
        if ( $width < $target_min_width || $height < $target_min_height ) {
          $errors['property-image-one'] = __("Your image doesn't meet the minimum dimension requirements of 350*350 pixels");
        }elseif($file_size_uploaded > 6000000){
          $errors['property-image-one'] = __("Your Filesize is greater than 5mb please resize and try again.");        
        }
      }
    }
    if(isset($_FILES['wpcf-property-image-two']['tmp_name']) ){
      $check = getimagesize( $_FILES['wpcf-property-image-two']['tmp_name'] );       
      $file_size_uploaded=$fields['wpcf-property-image-two']['field_data']['size'];
      if ( $check !== false ) {
        // check the dimensions only, independent of the orientation.
        // if the height is greater than the width, switch the values for comparison.
        $width = ($check[0] >= $check[1]) ? $check[0] : $check[1];
        $height = ($check[1] < $check[0]) ? $check[1] : $check[0];   
        if ( $width < $target_min_width || $height < $target_min_height ) {
          $errors['property-image-two'] = __("Your image doesn't meet the minimum dimension requirements of 350*350 pixels");
        }elseif($file_size_uploaded > 6000000){
          $errors['property-image-two'] = __("Your Filesize is greater than 5mb please resize and try again.");        
        }
      }
    }
	    if(isset($_FILES['wpcf-property-image-three']['tmp_name']) ){
      $check = getimagesize( $_FILES['wpcf-property-image-three']['tmp_name'] );       
      $file_size_uploaded=$fields['wpcf-property-image-three']['field_data']['size'];
      if ( $check !== false ) {
        // check the dimensions only, independent of the orientation.
        // if the height is greater than the width, switch the values for comparison.
        $width = ($check[0] >= $check[1]) ? $check[0] : $check[1];
        $height = ($check[1] < $check[0]) ? $check[1] : $check[0];   
        if ( $width < $target_min_width || $height < $target_min_height ) {
          $errors['property-image-three'] = __("Your image doesn't meet the minimum dimension requirements of 350*350 pixels");
        }elseif($file_size_uploaded > 6000000){
          $errors['property-image-three'] = __("Your Filesize is greater than 5mb please resize and try again.");        
        }
      }
    }
	    if(isset($_FILES['wpcf-property-image-four']['tmp_name']) ){
      $check = getimagesize( $_FILES['wpcf-property-image-four']['tmp_name'] );       
      $file_size_uploaded=$fields['wpcf-property-image-four']['field_data']['size'];
      if ( $check !== false ) {
        // check the dimensions only, independent of the orientation.
        // if the height is greater than the width, switch the values for comparison.
        $width = ($check[0] >= $check[1]) ? $check[0] : $check[1];
        $height = ($check[1] < $check[0]) ? $check[1] : $check[0];   
        if ( $width < $target_min_width || $height < $target_min_height ) {
          $errors['property-image-four'] = __("Your image doesn't meet the minimum dimension requirements of 350*350 pixels");
        }elseif($file_size_uploaded > 6000000){
          $errors['property-image-four'] = __("Your Filesize is greater than 5mb please resize and try again.");
        }
      }
    }
    if(isset($_FILES['wpcf-property-image-five']['tmp_name']) ){
      $check = getimagesize( $_FILES['wpcf-property-image-five']['tmp_name'] );       
      $file_size_uploaded=$fields['wpcf-property-image-five']['field_data']['size'];
      if ( $check !== false ) {
        // check the dimensions only, independent of the orientation.
        // if the height is greater than the width, switch the values for comparison.
        $width = ($check[0] >= $check[1]) ? $check[0] : $check[1];
        $height = ($check[1] < $check[0]) ? $check[1] : $check[0];   
        if ( $width < $target_min_width || $height < $target_min_height ) {
          $errors['property-image-five'] = __("Your image doesn't meet the minimum dimension requirements of 350*350 pixels");
        }elseif($file_size_uploaded > 6000000){
          $errors['property-image-five'] = __("Your Filesize is greater than 5mb please resize and try again.");
        }
      }
    }
  }
  $field_data = array($fields,$errors);
  //return result
  return $field_data;
}

[Shane]

Hello,

I see where the code wasn't activated, however there is an error being thrown on the site.

Can you enable the wordpress debugging so that we can have a printout of what exactly the error is ?

To do the printout please follow the instructions in the link below.
hidden link

Thanks,
Shane

[pramodk-2]

Hi Shane,

The debug mode is enabled now.

Please check below while testing.

Issue 1

1. Changed the height and width to 350 x 350 as per the requirement.
2. While trying to submit the file with less than 350 x 350, it is throwing an error and not be able to submit the form as expected.
3. However, even while the error is shown as above tried to submit for the second time and form is submitted as unexpected.
4. This behaviour is same for the image validation code for the user field as well (Initial code). {user_image_validation}

Issue 2
1. Reduced the file size to 5kb for one field and tried but this check is not validating and be able to submit the form.
2. This behaviour is working for (Initial code) {user_image_validation} but be able to submit the form even after the error. Click submit button twice and you are able to submit.

Once the error is thrown, until it is fixed it should not allow to submit the form. Please check the code and let me know.

Thanks.

[Shane]

Hello,

I made a few changes and updates to the code.

Can you test out your form here and let me know if it passes your requirements.
hidden link

Thanks,
Shane

[pramodk-2]

Hi Shane,

No, it is not validating anything.

Found issues in two code snippets provided by you in the same ticket.

1 . post_form_image_validation (code snippet name) : Not validating anything and be able to submit the form. Please check the page hidden link with the credentials provided earlier in the same ticket.

Also, the form should not be submitted once the error is thrown. Kindly check this issue as well by clicking submit button twice.

2 . user_image_validation (code snippet name) : The code is provided earlier in the starting of the same ticket. The issue which I missed to identify is I am able to submit the form (Click twice) even after the error is thrown.

Please check the page hidden link with the credentials provided earlier in the same ticket.

Kindly check clearly and suggest me.

Thanks.

[Shane]

Hello,

I actually checked the form before posting and the validations are working. I uploaded images into the fields that are expected to fail, as well i've uploaded images that would pass the validation and it works fine for me.

What I did was to check the form again and I see an issue with the conditional statement for the code. I've fixed this and it should now work.

The validations should work now, however I see the issue where after you've submitted it and it fails you can submit again.

This actually seems like a bug. Can you double check the forms again and let me know if the validations work.

We may need to split your second issue into a new ticket so we can handle that separately.

Thanks,
Shane

[pramodk-2]

Hi Shane,

Tested the image validation in hidden link and it is working fine. Many thanks.

However, I'm not sure why the form is allowed to submit when there are errors in the image field.

Also, not sure whether this is a bug for this field as I'm sure looking at the existing tickets, these kind of validations are requested by many and none of them found it as an issue?

I'm happy to have a new ticket but would be good if it is handled by you since I do not need to go through these for one more time.

Thanks.

New threads created by Shane and linked to this one are listed below:

https://toolset.com/forums/topic/split-validation-of-image-field-in-the-user-form-in-toolset/

[Shane]

Hello,

You can go ahead and close this ticket as we can continue the discussion in the split ticket below.
https://toolset.com/forums/topic/split-validation-of-image-field-in-the-user-form-in-toolset/

Thanks,
Shane

[pramodk-2]

My issue is resolved now. Thank you!