Add error class to invalid fields on PDF textbooks form

cms/static/js/models/textbook.js

@@ -59,25 +59,37 @@ CMS.Models.Textbook = Backbone.AssociatedModel.extend({
     },
     validate: function(attrs, options) {
         if (!attrs.name) {
-            return "Textbook name is required";
+            return {
+                message: "Textbook name is required",
+                attributes: {name: true}
+            };
         }
         if (attrs.chapters.length === 0) {
-            return "Please add at least one asset";
+            return {
+                message: "Please add at least one asset",
+                attributes: {chapters: true}
+            };
         } else if (attrs.chapters.length === 1) {
             // only asset_path is required: we don't need a name
             if (!attrs.chapters.first().get('asset_path')) {
-                return "Please add at least one asset";
+                return {
+                    message: "Please add at least one asset",
+                    attributes: {chapters: true}
+                };
             }
         } else {
             // validate all chapters
-            var allChaptersValid = true;
+            var invalidChapters = [];
             attrs.chapters.each(function(chapter) {
                 if(!chapter.isValid()) {
-                    allChaptersValid = false;
+                    invalidChapters.push(chapter);
                 }
             });
-            if(!allChaptersValid) {
-                return "All chapters must have a name and asset";
+            if(invalidChapters) {
+                return {
+                    message: "All chapters must have a name and asset",
+                    attributes: {chapters: invalidChapters}
+                };
             }
         }
     }
@@ -119,11 +131,20 @@ CMS.Models.Chapter = Backbone.AssociatedModel.extend({
     },
     validate: function(attrs, options) {
         if(!attrs.name && !attrs.asset_path) {
-            return "Chapter name and asset_path are both required";
+            return {
+                message: "Chapter name and asset_path are both required",
+                attributes: {name: true, asset_path: true}
+            };
         } else if(!attrs.name) {
-            return "Chapter name is required";
+            return {
+                message: "Chapter name is required",
+                attributes: {name: true}
+            };
         } else if (!attrs.asset_path) {
-            return "asset_path is required";
+            return {
+                message: "asset_path is required",
+                attributes: {asset_path: true}
+            };
         }
     }
 });
@@ -150,7 +171,10 @@ CMS.Models.FileUpload = Backbone.Model.extend({
     },
     validate: function(attrs, options) {
         if(attrs.selectedFile && attrs.selectedFile.type !== "application/pdf") {
-            return gettext("Only PDF files can be uploaded. Please select a file ending in .pdf to upload.");
+            return {
+                message: "Only PDF files can be uploaded. Please select a file ending in .pdf to upload.",
+                attributes: {selectedFile: true}
+            };
         }
     }
 });

cms/static/js/views/textbook.js

@@ -213,7 +213,8 @@ CMS.Views.EditChapter = Backbone.View.extend({
         this.$el.html(this.template({
             name: this.model.escape('name'),
             asset_path: this.model.escape('asset_path'),
-            order: this.model.get('order')
+            order: this.model.get('order'),
+            error: this.model.validationError
         }));
         return this;
     },
@@ -267,7 +268,7 @@ CMS.Views.UploadDialog = Backbone.View.extend({
             uploadedBytes: this.model.get('uploadedBytes'),
             totalBytes: this.model.get('totalBytes'),
             finished: this.model.get('finished'),
-            error: this.model.get('error')
+            error: this.model.validationError
         }));
         // ideally, we'd like to tell the browser to pre-populate the
         // <input type="file"> with the selectedFile if we have one -- but
@@ -286,8 +287,7 @@ CMS.Views.UploadDialog = Backbone.View.extend({
     },
     selectFile: function(e) {
         this.model.set({
-            selectedFile: e.target.files[0] || null,
-            error: null
+            selectedFile: e.target.files[0] || null
         });
     },
     show: function(e) {
@@ -308,8 +308,7 @@ CMS.Views.UploadDialog = Backbone.View.extend({
     },
     handleInvalid: function(model, error, options) {
         model.set({
-            selectedFile: null,
-            error: error
+            selectedFile: null
         });
     },
     upload: function(e) {

cms/templates/js/edit-chapter.underscore

@@ -1,9 +1,11 @@
-<div class="input-wrap field text required field-add-chapter-name chapter<%= order %>-name">
+<div class="input-wrap field text required field-add-chapter-name chapter<%= order %>-name
+    <% if (error && error.attributes && error.attributes.name) { print('error'); } %>">
   <label for="chapter<%= order %>-name"><%= gettext("Chapter Name") %></label>
   <input id="chapter<%= order %>-name" name="chapter<%= order %>-name" class="chapter-name short" placeholder="<%= _.str.sprintf(gettext("Chapter %s"), order) %>" value="<%= name %>" type="text">
   <span class="tip tip-stacked"><%= gettext("the title/name of the chapter that will be used in navigating") %></span>
 </div>
-<div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset">
+<div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset
+    <% if (error && error.attributes && error.attributes.asset_path) { print('error'); } %>">
   <label for="chapter<%= order %>-asset-path"><%= gettext("Chapter Asset") %></label>
   <input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" class="chapter-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>" type="text">
   <span class="tip tip-stacked"><%= gettext("provide the path to a file added to this course or upload a new one") %></span>

cms/templates/js/edit-textbook.underscore

@@ -1,14 +1,14 @@
 <form class="edit-textbook" id="edit_textbook_form">
   <div class="wrapper-form">
-  <% if (error) { %>
+  <% if (error && error.message) { %>
     <div id="edit_textbook_error" class="message message-status message-status error is-shown" name="edit_textbook_error">
-      <%= error %>
+      <%= gettext(error.message) %>
     </div>
   <% } %>
 
   <fieldset class="textbook-fields">
     <legend class="sr"><%= gettext("Textbook information") %></legend>
-        <div class="input-wrap field text required add-textbook-name">
+        <div class="input-wrap field text required add-textbook-name <% if(error && error.attributes && error.attributes.name) { print('error'); } %>">
           <label for="textbook-name-input"><%= gettext("Textbook Name") %></label>
           <input id="textbook-name-input" name="textbook-name" type="text" placeholder="<%= gettext("Introduction to Cookie Baking") %>" value="<%= name %>">
           <span class="tip tip-stacked"><%= gettext("the title/name of the text book as you would like your students to see it.") %></span>