Implemented XBlocks validation on client side and submit button behavior based on it

mentoring/public/js/answer.js

 function AnswerBlock(runtime, element) {
     return {
+
+        init: function(options) {
+          // register the child validator
+          $(':input', element).on('keyup', options.blockValidator);
+        },
+
         submit: function() {
+            return $(':input', element).serializeArray();
+        },
+
+        handleSubmit: function(result) {
+            $(element).find('.message').text((result || {}).error || '');
+        },
+
+        // Returns `true` if the child is valid, else `false`
+        validate: function() {
             var input = $(':input', element),
                 input_value = input.val().replace(/^\s+|\s+$/gm,''),
                 answer_length = input_value.length,
                 data = input.data();
 
-            if (_.isNumber(data.min_characters) &&
-                (data.min_characters > 0) &&
-                (answer_length < data.min_characters)) {
-              throw "The answer has a minimum of " + data.min_characters + " characters.";
+            // an answer cannot be empty event if min_characters is 0
+            if (_.isNumber(data.min_characters)) {
+                var min_characters = _.max([data.min_characters, 1]);
+                if (answer_length < min_characters) {
+                    return false;
+                }
             }
-            return input.serializeArray();
-        },
-        handleSubmit: function(result) {
-            $(element).find('.message').text((result || {}).error || '');
+
+            return true;
         }
     }
 }

mentoring/public/js/mentoring.js

@@ -83,27 +83,24 @@ function MentoringBlock(runtime, element) {
             for (var i = 0; i < children.length; i++) {
                 var child = children[i];
                 if (child.name !== undefined) {
-                    try {
                         data[child.name] = callIfExists(child, 'submit');
-                    }
-                    catch (error) {
-                      alert(error);
-                      success = false;
-                    }
                 }
             }
-            if (success) {
-                var handlerUrl = runtime.handlerUrl(element, 'submit');
-                $.post(handlerUrl, JSON.stringify(data)).success(handleSubmitResults);
-            }
+            var handlerUrl = runtime.handlerUrl(element, 'submit');
+            $.post(handlerUrl, JSON.stringify(data)).success(handleSubmitResults);
         });
 
         // init children (especially mrq blocks)
         var children = getChildren(element);
+        var options = {
+            blockValidator: validateXBlock
+        };
         _.each(children, function(child) {
-          callIfExists(child, 'init');
+          callIfExists(child, 'init', options);
         });
 
+        validateXBlock();
+
         if (submit_dom.length) {
             renderProgress();
         }
@@ -121,6 +118,31 @@ function MentoringBlock(runtime, element) {
         $.post(handlerUrl, '{}').success(handleRefreshResults);
     }
 
+    // validate all children
+    function validateXBlock() {
+        var submit_dom = $(element).find('.submit .input-main');
+        var children_are_valid = true;
+        var data = {};
+        var children = getChildren(element);
+
+        for (var i = 0; i < children.length; i++) {
+            var child = children[i];
+            if (child.name !== undefined) {
+                var child_validation = callIfExists(child, 'validate');
+                if (_.isBoolean(child_validation)) {
+                    children_are_valid = children_are_valid && child_validation
+                }
+            }
+        }
+
+        if (!children_are_valid) {
+            submit_dom.attr('disabled','disabled');
+        }
+        else {
+            submit_dom.removeAttr("disabled");
+        }
+    }
+
     // We need to manually refresh, XBlocks are currently loaded together with the section
     refreshXBlock(element);
 }