Added Rubric Client Side Validation

openassessment/xblock/static/js/spec/studio/oa_edit_rubric.js

@@ -135,7 +135,6 @@ describe("OpenAssessment.EditRubricView", function() {
         expect(view.feedbackPrompt()).toEqual(prompt);
     });
 
-
     it("fires a notification when an option is added", function() {
         view.addOption();
         expect(notifier.notifications).toContain({
@@ -231,4 +230,41 @@ describe("OpenAssessment.EditRubricView", function() {
         testValidateOptionPoints("998", true);
         testValidateOptionPoints("999", true);
     });
+
+    it("validates the criterion prompt field", function() {
+        // Filled in prompt should be valid
+        $.each(view.getAllCriteria(), function() {
+            this.prompt("This is a prompt.");
+        });
+        expect(view.validate()).toBe(true);
+
+        // Change one of the prompts to an empty string
+        view.getCriterionItem(0).prompt("");
+
+        // Now the view should be invalid
+        expect(view.validate()).toBe(false);
+        expect(view.validationErrors()).toContain("Criterion prompt is invalid.");
+
+        // Clear validation errors
+        view.clearValidationErrors();
+        expect(view.validationErrors()).toEqual([]);
+    });
+
+    it("validates the number of criteria in the rubric", function() {
+        // Starting with three criteria, we should be valid.
+        expect(view.validate()).toBe(true);
+
+        // Removes the rubric criteria
+        $.each(view.getAllCriteria(), function() {
+            view.removeCriterion(this);
+        });
+
+        // Now we should be invalid (# Criteria == 0)
+        expect(view.validate()).toBe(false);
+        expect(view.validationErrors()).toContain("The rubric must contain at least one criterion");
+
+        view.clearValidationErrors();
+        expect(view.validationErrors()).toEqual([]);
+
+    });
 });

openassessment/xblock/static/js/src/studio/oa_container_item.js

@@ -283,6 +283,8 @@ Returns:
 OpenAssessment.RubricCriterion = function(element, notifier) {
     this.element = element;
     this.notifier = notifier;
+    this.labelSel = $('.openassessment_criterion_label', this.element);
+    this.promptSel = $('.openassessment_criterion_prompt', this.element);
     this.optionContainer = new OpenAssessment.Container(
         OpenAssessment.RubricOption, {
             containerElement: $(".openassessment_criterion_option_list", this.element).get(0),
@@ -357,8 +359,7 @@ OpenAssessment.RubricCriterion.prototype = {
 
     **/
     label: function(label) {
-        var sel = $('.openassessment_criterion_label', this.element);
-        return OpenAssessment.Fields.stringField(sel, label);
+        return OpenAssessment.Fields.stringField(this.labelSel, label);
     },
 
     /**
@@ -372,8 +373,7 @@ OpenAssessment.RubricCriterion.prototype = {
 
     **/
     prompt: function(prompt) {
-        var sel = $('.openassessment_criterion_prompt', this.element);
-        return OpenAssessment.Fields.stringField(sel, prompt);
+        return OpenAssessment.Fields.stringField(this.promptSel, prompt);
     },
 
     /**
@@ -440,7 +440,14 @@ OpenAssessment.RubricCriterion.prototype = {
 
     **/
     validate: function() {
-        var isValid = true;
+        // The criterion prompt is required.
+        var isValid = (this.prompt() !== "");
+
+        if (!isValid) {
+            this.promptSel.addClass("openassessment_highlighted_field");
+        }
+
+        // All options must be valid
         $.each(this.optionContainer.getAllItems(), function() {
             isValid = (this.validate() && isValid);
         });
@@ -457,9 +464,17 @@ OpenAssessment.RubricCriterion.prototype = {
     **/
     validationErrors: function() {
         var errors = [];
+
+        // Criterion prompt errors
+        if (this.promptSel.hasClass('openassessment_highlighted_field')) {
+            errors.push("Criterion prompt is invalid.");
+        }
+
+        // Option errors
         $.each(this.optionContainer.getAllItems(), function() {
             errors = errors.concat(this.validationErrors());
         });
+
         return errors;
     },
 
@@ -467,6 +482,10 @@ OpenAssessment.RubricCriterion.prototype = {
     Clear all validation errors from the UI.
     **/
     clearValidationErrors: function() {
+        // Clear criterion prompt errors
+        this.promptSel.removeClass("openassessment_highlighted_field");
+
+        // Clear option errors
         $.each(this.optionContainer.getAllItems(), function() {
             this.clearValidationErrors();
         });

openassessment/xblock/static/js/src/studio/oa_edit_rubric.js

@@ -15,6 +15,7 @@ This view fires the following notification events:
 **/
 OpenAssessment.EditRubricView = function(element, notifier) {
     this.element = element;
+    this.criterionAddButton = $('#openassessment_rubric_add_criterion', this.element);
 
     this.criteriaContainer = new OpenAssessment.Container(
         OpenAssessment.RubricCriterion, {
@@ -199,9 +200,18 @@ OpenAssessment.EditRubricView.prototype = {
 
     **/
     validate: function() {
-        var isValid = true;
+        var criteria = this.getAllCriteria();
+        var isValid = criteria.length > 0;
+        if (!isValid) {
+            this.criterionAddButton
+                .addClass("openassessment_highlighted_field")
+                .click( function() {
+                    $(this).removeClass("openassessment_highlighted_field");
+                }
+            );
+        }
 
-        $.each(this.getAllCriteria(), function() {
+        $.each(criteria, function() {
             isValid = (this.validate() && isValid);
         });
 
@@ -219,6 +229,11 @@ OpenAssessment.EditRubricView.prototype = {
     validationErrors: function() {
         var errors = [];
 
+        if (this.criterionAddButton.hasClass("openassessment_highlighted_field")) {
+            errors.push("The rubric must contain at least one criterion");
+        }
+
+        // Sub-validates the criteria defined by the rubric
         $.each(this.getAllCriteria(), function() {
             errors = errors.concat(this.validationErrors());
         });
@@ -230,6 +245,8 @@ OpenAssessment.EditRubricView.prototype = {
     Clear all validation errors from the UI.
     **/
     clearValidationErrors: function() {
+        this.criterionAddButton.removeClass("openassessment_highlighted_field");
+
         $.each(this.getAllCriteria(), function() {
             this.clearValidationErrors();
         });

openassessment/xblock/static/sass/oa/utilities/_developer.scss

@@ -589,6 +589,9 @@
               width: 70%;
               float: right;
             }
+            .openassessment_criterion_prompt.openassessment_highlighted_field{
+              border: 2px solid red;
+            }
           }
         }
       }
@@ -822,6 +825,11 @@
       margin: 15px 10px;
     }
 
+    #openassessment_rubric_add_criterion.openassessment_highlighted_field{
+      color: red;
+      border-width: 2px;
+    }
+
     #openassessment_rubric_add_criterion:hover{
       color: white;
       background-color: #009fe6;