diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 72ef5991a3..b68b82dfa6 100644 --- a/cms/static/js/base.js +++ b/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('

' + gettext('Course fields must have a combined length of no more than 80 characters.') + '

'); + $('.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('' + msg + ''); + 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('

' + gettext('Course fields must have a combined length of no more than 80 characters.') + '

'); - $('.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('

' + data.ErrMsg + '

'); + $('.new-course-save').addClass('is-disabled'); } } ); diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss index 0d2dec68a0..69bf3a6566 100644 --- a/cms/static/sass/elements/_forms.scss +++ b/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; diff --git a/cms/templates/index.html b/cms/templates/index.html index 5a88054563..e5cf2fa54a 100644 --- a/cms/templates/index.html +++ b/cms/templates/index.html @@ -99,23 +99,27 @@ ${_("The public display name for your course.")} +
  • ${_("The name of the organization sponsoring the course")} - ${_("Note: No spaces or special characters are allowed. This cannot be changed.")} +
  • ${_("The unique number that identifies your course within your organization")} - ${_("Note: No spaces or special characters are allowed. This cannot be changed.")} +
  • ${_("The term in which your course will run")} - ${_("Note: No spaces or special characters are allowed. This cannot be changed.")} +