type: image_advanced - required rule not works: Never show required message. [V 5.2.10]

[debhood]

Hi, I add a custom filed type image_advanced to my custom post type. I have insert a validation rule to make it required, but not woks. My code:

function add_metabox_to_post( $meta_boxes ) {
    $prefix = 'post-';
    $postType= 'post';

    $meta_boxes[] = array(
      'id' => 'post_custom_attributes',
      'title' => esc_html__( 'Post Custom Attributes', 'my_domain' ),
      'post_types' => array($postType ),
      'context' => 'advanced', //'advanced', //'side',
      'priority' => 'default',
      'autosave' => 'false',
      'fields' => array(
        array(
          'id' => $prefix . 'language',
          'name' => esc_html__( 'Language', 'my_domain' ),
          'type' => 'select',
          'desc' => esc_html__( __('Choise Language'), 'my_domain' ),
          'placeholder' => esc_html__( 'Choise a Language', 'my_domain' ),
          'options' => $this->wlappHelper->get_metabox_select_options($this->langSupport),
        ),
        array(
            'id' => $prefix . 'image',
            'type' => 'image_advanced',
            'name' => esc_html__( 'Image', 'my_domain' ),
            'desc' => esc_html__( __('Add an image to Edpage'), 'my_domain' ),
            'force_delete' => 'false',
            'max_file_uploads' => 1,
            'image_size'       => $this->maxMediaSize,
        ),
      ),
      'validation' => [
        'rules'  => [
          'post_title'          => ['required' => true , 'minlength' => 5],
          'post_content'        => ['required' => true , 'minlength' => 5],
          'excerpt'             => ['required' => true , 'minlength' => 5],
          $prefix . 'language'  => ['required'  => true],
          $prefix . 'image'       => ['required'  => true],
          ],
      ],
    );

    return $meta_boxes;
  }

Thanks for your support.

Word Press Version: 5.3.2 Meta Box Version: 5.2.7

[Longkt]

Hi @debhood

Are you using Gutenberg? The validation doesn’t work for Gutenberg yet because Gutenberg doesn’t have a way to check the values before submission via Ajax.

At this time, please try to use Classic Editor to validate the field.

Reference: https://metabox.io/support/topic/form-validation-not-working-in-custom-post-type/

[debhood]

Hi @debhood

Are you using Gutenberg? The validation doesn’t work for Gutenberg yet because Gutenberg doesn’t have a way to check the values before submission via Ajax.

At this time, please try to use Classic Editor to validate the field.

Reference: https://metabox.io/support/topic/form-validation-not-working-in-custom-post-type/

Hi @Longkt , I'm using classic editor. Thanks for your response.

[debhood]

Hi, the image_advaced not detect add an image. Show error "This field as requiread" anyhow. Sorry for my inaccuracy

[Longkt]

Because the field image_advanced set the settings 'multiple' => true as default, so you should add the [] (array) to the field validation rule $prefix . 'image[]' => ['required' => true],

[debhood]

$prefix . 'image[]' => ['required' => true], I try but don't works. If I add suffix '[]' the required rule it's irrelevant. By documentation i use the name of filed: '$prefix . 'image'. I checked html code from page:

<input class="rwmb-image_advanced" name="edpage-field-image" type="hidden" data-attachments="[]" data-options="{&quot;imageSize&quot;:&quot;thumbnail&quot;,&quot;mimeType&quot;:&quot;image&quot;,&quot;maxFiles&quot;:0,&quot;forceDelete&quot;:false,&quot;maxStatus&quot;:true}">

[debhood]

Hi, i find the problem. When the page is initialized the image_advance component creates an empty ul html tag. A js script dynamically populates the list of items when selecting images. The validation rule is defined on the li tag of the html list, but does not exist until at least one image has been added.

Html code before add an image:

<div class="rwmb-input">
    <input class="rwmb-image_advanced" name="shop-field-image" type="hidden" value="305" data-attachments="[]" data-options="{&quot;imageSize&quot;:&quot;thumbnail&quot;,&quot;mimeType&quot;:&quot;image&quot;,&quot;maxFiles&quot;:1,&quot;forceDelete&quot;:false,&quot;maxStatus&quot;:true}">
    <div class="rwmb-media-view">
        <ul class="rwmb-media-list ui-sortable">
        </ul>
        <div class="rwmb-media-status">
                0/1
                file
        </div>
        <div class="rwmb-media-add">
            <a class="button">+ Add Media</a>
        </div>
    </div>
    <p id="shop-field-image-description" class="description">Add an icon / thumbnail to Edpage</p>
</div>

Html code after add an image:

<div class="rwmb-field rwmb-image_advanced-wrapper">
    <div class="rwmb-label">
        <label for="shop-field-image">Icon / Thumbnail</label>
    </div>
    <div class="rwmb-input">
        <input class="rwmb-image_advanced" name="shop-field-image" type="hidden" value="305" data-attachments="[]" data-options="{&quot;imageSize&quot;:&quot;thumbnail&quot;,&quot;mimeType&quot;:&quot;image&quot;,&quot;maxFiles&quot;:1,&quot;forceDelete&quot;:false,&quot;maxStatus&quot;:true}">
        <div class="rwmb-media-view">
            <ul class="rwmb-media-list ui-sortable">
                <li class="rwmb-image-item attachment thumbnail">
                    <input type="hidden" name="shop-field-image[]" value="311" class="rwmb-media-input">
                    <div class="attachment-preview">
                        <div class="thumbnail">
                            <div class="centered">
                                <img src="http://wp.local/wp-content/uploads/2020/04/caffe_nero_logo.jpg">
                            </div>
                        </div>
                    </div>
                    <div class="rwmb-image-overlay">
                    </div>
                    <div class="rwmb-image-actions">
                        <a class="rwmb-image-edit rwmb-edit-media" title="Edit" href="http://wp.local/wp-admin/post.php?post=311&amp;action=edit" target="_blank">
                            <span class="dashicons dashicons-edit"> </span>
                        </a>
                        <a href="#" class="rwmb-image-delete rwmb-remove-media" title="Remove">
                            <span class="dashicons dashicons-no-alt"> </span>
                        </a>
                    </div>
                </li>
            </ul>
            <div class="rwmb-media-status">
                    1/1
                    file
            </div>
            <div class="rwmb-media-add" style="display: none;">
                <a class="button">+ Add Media</a>
            </div>
        </div>
        <p id="shop-field-image-description" class="description">Add an icon / thumbnail to Edpage</p>
    </div>
</div>