Magento 2 : Image Validation is not working in back end form

Question

I have a custom module which manage to upload the banners.

Everything working fine except image validation.

Below is my code for the image in

app/code/E25media/Bannersmanager/Block/Adminhtml/Banners/Edit/Tab/Main.php

<?php
namespace E25media\Bannermanager\Block\Adminhtml\Banners\Edit\Tab;

class Main extends \Magento\Backend\Block\Widget\Form\Generic implements \Magento\Backend\Block\Widget\Tab\TabInterface
{
   /* -- some code here */ 
protected function _prepareForm()
{ 
     /* -- some code here */ 
     $fieldset->addType('image', '\E25media\Bannermanager\Block\Adminhtml\Banners\Helper\Image');

$fieldset->addField('banner_image_mobile', 'image', array(
'name'      => 'banner_image_mobile',
'class'     => 'required-entry required-file',
'label' => __('Mobile Banner Image'),
'title' => __('Mobile Banner Image'),
'required'  => true,
'disabled'  => $isElementDisabled));

  /* -- some code here */ 
 }

My form file upload is look like this.

But i can submit the form without uploading the image.

How to validate the image file ?

Answer 1

Try this.
Use javascript to add the class.

$fieldset->addField( 
        'banner_image_mobile', 
        'image',
        [ 
        'name' => 'banner_image_mobile', 
        'label' => __('Mobile Banner Image'), 
        'title' => __('Mobile Banner Image'),             
        'note' => __('Size: 164px x 24px, Allowed File Types : (JPG,JPEG,PNG), Max Size:2MB.'), 
        'path'=> $model->getImagePath(),
        'required' => true, 
        'value' => $model->getImagePath()
        ] 
        )->setAfterElementHtml('
        <script>
            require([
                 "jquery",
            ], function($){
                $(document).ready(function () {
                    if($("#page_banner_image_mobile").attr("value")){
                        $("#page_banner_image_mobile").removeClass("required-file");
                    }else{
                        $("#page_banner_image_mobile").addClass("required-file");
                    }
                    $( "#page_banner_image_mobile" ).attr( "accept", "image/x-png,image/gif,image/jpeg,image/jpg,image/png" );
                });
              });
       </script>
    ');