Make alternative fields required for accessibility.

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -270,6 +270,11 @@
     opacity: 0.7;
 }
 
+.xblock--drag-and-drop--editor .tab .field-error {
+    outline: none;
+    box-shadow: 0 0 10px darkred;
+}
+
 .xblock--drag-and-drop--editor .icon.add:before {
     content: '';
     height: 10px;

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -59,15 +59,45 @@ function DragAndDropEditBlock(runtime, element, params) {
 
                     _fn.build.clickHandlers();
                 },
+
+                validate: function() {
+                    var fields = $element.find('.tab').not('.hidden').find('input, textarea');
+                    var success = true;
+                    fields.each(function(index, field) {
+                        field = $(field);
+                        // Right now our only check is if a field is set or not.
+                        field.removeClass('field-error');
+                        if (! field[0].checkValidity()) {
+                            field.addClass('field-error');
+                            success = false;
+                        }
+                    });
+                    if (! success) {
+                        runtime.notify('error', {
+                            'title': window.gettext("There was an error with your form."),
+                            'message': window.gettext("Please check over your submission.")
+                        });
+                    }
+                    return success
+                },
+
                 clickHandlers: function() {
                     var $fbkTab = _fn.build.$el.feedback.tab,
                         $zoneTab = _fn.build.$el.zones.tab,
                         $itemTab = _fn.build.$el.items.tab;
 
-                    $element.one('click', '.continue-button', function(e) {
+                    var self = this;
+
+                    $element.one('click', '.continue-button', function loadSecondTab(e) {
                         // $fbkTab -> $zoneTab
 
                         e.preventDefault();
+
+                        if (!self.validate()) {
+                            $(e.target).one('click', loadSecondTab);
+                            return
+                        }
+
                         _fn.build.form.feedback(_fn.build.$el.feedback.form);
                         for (var i = 0; i < _fn.data.zones.length; i++) {
                             _fn.build.form.zone.add(_fn.data.zones[i]);
@@ -94,10 +124,15 @@ function DragAndDropEditBlock(runtime, element, params) {
                         $fbkTab.addClass('hidden');
                         $zoneTab.removeClass('hidden');
 
-                        $(this).one('click', function(e) {
+                        $(this).one('click', function loadThirdTab(e) {
                             // $zoneTab -> $itemTab
                             e.preventDefault();
 
+                            if (!self.validate()) {
+                                $(e.target).one('click', loadThirdTab);
+                                return
+                            }
+
                             for (var i = 0; i < _fn.data.items.length; i++) {
                                 _fn.build.form.item.add(_fn.data.items[i]);
                             }
@@ -111,10 +146,14 @@ function DragAndDropEditBlock(runtime, element, params) {
                             $(this).addClass('hidden');
                             $('.save-button', element).parent()
                                 .removeClass('hidden')
-                                .one('click', function(e) {
+                                .one('click', function submitForm(e) {
                                     // $itemTab -> submit
 
                                     e.preventDefault();
+                                    if (!self.validate()) {
+                                        $(e.target).one('click', submitForm);
+                                        return
+                                    }
                                     _fn.build.form.submit();
                                 });
                         });

drag_and_drop_v2/templates/html/drag_and_drop_edit.html

@@ -52,7 +52,7 @@
                            type="text"
                            placeholder="{% trans 'For example, http://example.com/background.png or /static/background.png' %}">
                     <label class="h3" for="background-description">{% trans "Background description" %}</label>
-                    <textarea id="background-description"
+                    <textarea required id="background-description"
                               aria-describedby="background-description-description"></textarea>
                     <div id="background-description-description" class="target-image-form-help">
                         {% blocktrans %}

drag_and_drop_v2/templates/html/js_templates.html

@@ -15,7 +15,8 @@
         <input type="text"
                id="zone-{{index}}-title"
                class="title"
-               value="{{ title }}" />
+               value="{{ title }}"
+               required />
         <a href="#" class="remove-zone hidden">
             <div class="icon remove"></div>
         </a>
@@ -24,7 +25,8 @@
                id="zone-{{index}}-description"
                class="description"
                value="{{ description }}"
-               placeholder="{{i18n 'Describe this zone to non-visual users'}}" />
+               placeholder="{{i18n 'Describe this zone to non-visual users'}}"
+               required />
         <div class="layout">
             <label for="zone-{{index}}-width">{{i18n "width"}}</label>
             <input type="text"
@@ -79,7 +81,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 id="item-{{id}}-image-description"
+            <textarea required id="item-{{id}}-image-description"
                       class="item-image-description">{{ imageDescription }}</textarea>
         </div>
         <div class="row">