Correct non-unique course validation; code cleanup; better error style.

cms/static/js/base.js

@@ -615,6 +615,37 @@ function addNewCourse(e) {
     $body.bind('keyup', {
         $cancelButton: $cancelButton
     }, checkForCancel);
+
+    // Check that a course (org, number, run) doesn't use any special characters
+    var validateCourseItemEncoding = function(item) {
+        var required = validateRequiredField(item);
+        if(required) {
+            return required;
+        }
+        if(item !== encodeURIComponent(item)) {
+            return gettext('Please do not use any spaces or special characters in this field.');
+        }
+        return '';
+    }
+
+    // Ensure that all items are less than 80 characters.
+    var validateTotalCourseItemsLength = function() {
+        var totalLength = _.reduce(
+            ['.new-course-name', '.new-course-org', '.new-course-number', '.new-course-run'],
+            function(sum, ele) {
+                return sum + $(ele).val().length;
+        }, 0
+        );
+        if(totalLength > 80) {
+            $('.wrap-error').addClass('is-shown');
+            $('#course_creation_error').html('<p>' + gettext('Course fields must have a combined length of no more than 80 characters.') + '</p>');
+            $('.new-course-save').addClass('is-disabled');
+        }
+        else {
+            $('.wrap-error').removeClass('is-shown');
+        }
+    }
+
     // Handle validation asynchronously
     _.each(
         ['.new-course-org', '.new-course-number', '.new-course-run'],
@@ -635,21 +666,25 @@ function addNewCourse(e) {
     );
     var $name = $('.new-course-name');
     $name.on('keyup', function() {
-        var error = validateCourseName($name.val());
+        var error = validateRequiredField($name.val());
         setNewCourseFieldInErr($name.parent('li'), error);
         validateTotalCourseItemsLength();
     });
 }
 
+function validateRequiredField(msg) {
+    return msg.length === 0 ? gettext('Required field.') : '';
+}
+
 function setNewCourseFieldInErr(el, msg) {
-    el.children('.tip-error').remove();
     if(msg) {
         el.addClass('error');
-        el.append('<span class="tip tip-error">' + msg + '</span>');
+        el.children('span.tip-error').addClass('is-showing').removeClass('is-hiding').text(msg);
         $('.new-course-save').addClass('is-disabled');
     }
     else {
         el.removeClass('error');
+        el.children('span.tip-error').addClass('is-hiding').removeClass('is-showing');
         // One "error" div is always present, but hidden or shown
         if($('.error').length === 1) {
             $('.new-course-save').removeClass('is-disabled');
@@ -657,42 +692,6 @@ function setNewCourseFieldInErr(el, msg) {
     }
 };
 
-function validateCourseName(name) {
-    if(name.length === 0) {
-        return gettext('Required field.');
-    }
-    return '';
-}
-
-// Check that a course (org, number, run) doesn't use any special characters
-function validateCourseItemEncoding(item) {
-    if(item === '') {
-        return gettext('Required field.');
-    }
-    if(item !== encodeURIComponent(item)) {
-        return gettext('Please do not use any spaces or special characters in this field.');
-    }
-    return '';
-}
-
-// Ensure that all items are less than 80 characters.
-function validateTotalCourseItemsLength() {
-    var totalLength = _.reduce(
-        ['.new-course-name', '.new-course-org', '.new-course-number', '.new-course-run'],
-        function(sum, ele) {
-            return sum + $(ele).val().length;
-        }, 0
-    );
-    if(totalLength > 80) {
-        $('.wrap-error').addClass('is-shown');
-        $('#course_creation_error').html('<p>' + gettext('Course fields must have a combined length of no more than 80 characters.') + '</p>');
-        $('.new-course-save').addClass('is-disabled');
-    }
-    else {
-        $('.wrap-error').removeClass('is-shown');
-    }
-}
-
 function saveNewCourse(e) {
     e.preventDefault();
 
@@ -701,23 +700,23 @@ function saveNewCourse(e) {
         ['.new-course-name', '.new-course-org', '.new-course-number', '.new-course-run'],
         function(acc, ele) {
             var $ele = $(ele);
-            var error = $ele.val().length === 0 ? gettext('Required field.') : '';
+            var error = validateRequiredField($ele.val());
             setNewCourseFieldInErr($ele.parent('li'), error);
             return error ? true : acc;
         },
         false
     );
 
+    if(errors) {
+        return;
+    }
+
     var $newCourseForm = $(this).closest('#create-course-form');
     var display_name = $newCourseForm.find('.new-course-name').val();
     var org = $newCourseForm.find('.new-course-org').val();
     var number = $newCourseForm.find('.new-course-number').val();
     var run = $newCourseForm.find('.new-course-run').val();
 
-    if(errors) {
-        return;
-    }
-
     analytics.track('Created a Course', {
         'org': org,
         'number': number,
@@ -735,14 +734,9 @@ function saveNewCourse(e) {
             if (data.id !== undefined) {
                 window.location = '/' + data.id.replace(/.*:\/\//, '');
             } else if (data.ErrMsg !== undefined) {
-                var orgErrMsg = (data.OrgErrMsg !== undefined) ? data.OrgErrMsg : null;
-                if(orgErrMsg) {
-                    setNewCourseFieldInErr($('.new-course-org').parent('li'), orgErrMsg);
-                }
-                var courseErrMsg = (data.CourseErrMsg !== undefined) ? data.CourseErrMsg : null;
-                if(courseErrMsg) {
-                    setNewCourseFieldInErr($('.new-course-number').parent('li'), orgErrMsg);
-                }
+                $('.wrap-error').addClass('is-shown');
+                $('#course_creation_error').html('<p>' + data.ErrMsg + '</p>');
+                $('.new-course-save').addClass('is-disabled');
             }
         }
     );

cms/static/sass/elements/_forms.scss

@@ -225,6 +225,14 @@ form[class^="create-"] {
           color: $red;
         }
 
+        .is-showing {
+            @extend .anim-fadeIn;
+        }
+
+        .is-hiding {
+            @extend .anim-fadeOut;
+        }
+
         .tip-error {
           display: block;
           color: $red;

cms/templates/index.html

@@ -99,23 +99,27 @@
                   <label for="new-course-name">${_("Course Name")}</label>
                   <input class="new-course-name" id="new-course-name" type="text" name="new-course-name" aria-required="true" placeholder="${_('e.g. Introduction to Computer Science')}" />
                   <span class="tip tip-stacked">${_("The public display name for your course.")}</span>
+                  <span class="tip tip-error is-hiding"></span>
                 </li>
                 <li class="field field-inline text required" id="field-organization">
                   <label for="new-course-org">${_("Organization")}</label>
                   <input class="new-course-org" id="new-course-org" type="text" name="new-course-org" aria-required="true" placeholder="${_('e.g. MITX or IMF')}" />
                   <span class="tip tip-stacked">${_("The name of the organization sponsoring the course")}  - <strong>${_("Note: No spaces or special characters are allowed. This cannot be changed.")}</strong></span>
+                  <span class="tip tip-error is-hiding"></span>
                 </li>
 
                 <li class="field field-inline text required" id="field-course-number">
                   <label for="new-course-number">${_("Course Number")}</label>
                   <input class="new-course-number" id="new-course-number" type="text" name="new-course-number" aria-required="true" placeholder="${_('e.g. CS101')}" />
                   <span class="tip tip-stacked">${_("The unique number that identifies your course within your organization")} - <strong>${_("Note: No spaces or special characters are allowed. This cannot be changed.")}</strong></span>
+                  <span class="tip tip-error is-hiding"></span>
                 </li>
 
                 <li class="field field-inline text required" id="field-course-run">
                   <label for="new-course-run">${_("Course Run")}</label>
                   <input class="new-course-run" id="new-course-run" type="text" name="new-course-run" aria-required="true"placeholder="${_('e.g. 2013_Spring')}" />
                   <span class="tip tip-stacked">${_("The term in which your course will run")} - <strong>${_("Note: No spaces or special characters are allowed. This cannot be changed.")}</strong></span>
+                  <span class="tip tip-error is-hiding"></span>
                 </li>
               </ol>