Only require "Image Description" if an "Image URL" is set

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -201,7 +201,8 @@ function DragAndDropEditBlock(runtime, element, params) {
                             _fn.build.form.item.add();
                         })
                         .on('click', '.remove-item', _fn.build.form.item.remove)
-                        .on('click', '.advanced-link a', _fn.build.form.item.showAdvancedSettings);
+                        .on('click', '.advanced-link a', _fn.build.form.item.showAdvancedSettings)
+                        .on('input', '.item-image-url', _fn.build.form.item.imageURLChanged);
                 },
                 form: {
                     zone: {
@@ -416,6 +417,12 @@ function DragAndDropEditBlock(runtime, element, params) {
                             _fn.build.form.item.disableDelete();
 
                         },
+                        imageURLChanged: function(e) {
+                            // Mark the image description field as required if (and only if) an image is specified.
+                            var $imageUrlField = $(e.currentTarget);
+                            var $descriptionField = $imageUrlField.closest('.item').find('.item-image-description');
+                            $descriptionField.prop("required", $imageUrlField.val() != "");
+                        },
                         enableDelete: function() {
                             if (_fn.build.form.item.count > 1) {
                                 _fn.build.$el.items.form.find('.remove-item').removeClass('hidden');

drag_and_drop_v2/templates/html/js_templates.html

@@ -82,7 +82,7 @@
         </div>
         <div class="row">
             <label for="item-{{id}}-image-description">{{i18n "Image description (should provide sufficient information to place the item even if the image did not load)"}}</label>
-            <textarea required id="item-{{id}}-image-description"
+            <textarea id="item-{{id}}-image-description" {{#if imageURL}}required{{/if}}
                       class="item-image-description">{{ imageDescription }}</textarea>
         </div>
         <div class="row">