Skip to content

E
edx-platform
Commit c611470e by Peter Fogg
Options

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

parent 8fa4b4db
Showing with 58 additions and 52 deletions
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment