278 lines
8.8 KiB
JavaScript
278 lines
8.8 KiB
JavaScript
(function(define) {
|
|
'use strict';
|
|
define([
|
|
'jquery',
|
|
'underscore',
|
|
'backbone',
|
|
'common/js/utils/edx.utils.validate'
|
|
],
|
|
function($, _, Backbone, EdxUtilsValidate) {
|
|
return Backbone.View.extend({
|
|
tagName: 'form',
|
|
|
|
el: '',
|
|
|
|
tpl: '',
|
|
|
|
fieldTpl: '#form_field-tpl',
|
|
|
|
events: {},
|
|
|
|
errors: [],
|
|
|
|
formType: '',
|
|
|
|
$form: {},
|
|
|
|
fields: [],
|
|
|
|
// String to append to required label fields
|
|
requiredStr: '*',
|
|
|
|
submitButton: '',
|
|
|
|
initialize: function(data) {
|
|
this.model = data.model;
|
|
this.preRender(data);
|
|
|
|
this.tpl = $(this.tpl).html();
|
|
this.fieldTpl = $(this.fieldTpl).html();
|
|
this.buildForm(data.fields);
|
|
|
|
this.listenTo(this.model, 'error', this.saveError);
|
|
},
|
|
|
|
/* Allows extended views to add custom
|
|
* init steps without needing to repeat
|
|
* default init steps
|
|
*/
|
|
preRender: function(data) {
|
|
/* Custom code goes here */
|
|
return data;
|
|
},
|
|
|
|
render: function(html) {
|
|
var fields = html || '';
|
|
|
|
$(this.el).html(_.template(this.tpl)({
|
|
fields: fields
|
|
}));
|
|
|
|
this.postRender();
|
|
|
|
return this;
|
|
},
|
|
|
|
postRender: function() {
|
|
var $container = $(this.el);
|
|
this.$form = $container.find('form');
|
|
this.$errors = $container.find('.submission-error');
|
|
this.$submitButton = $container.find(this.submitButton);
|
|
},
|
|
|
|
buildForm: function(data) {
|
|
var html = [],
|
|
i,
|
|
len = data.length,
|
|
fieldTpl = this.fieldTpl;
|
|
|
|
this.fields = data;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
if (data[i].errorMessages) {
|
|
data[i].errorMessages = this.escapeStrings(data[i].errorMessages);
|
|
}
|
|
|
|
html.push(_.template(fieldTpl)($.extend(data[i], {
|
|
form: this.formType,
|
|
requiredStr: this.requiredStr
|
|
})));
|
|
}
|
|
|
|
this.render(html.join(''));
|
|
},
|
|
|
|
/* Helper method to toggle display
|
|
* including accessibility considerations
|
|
*/
|
|
element: {
|
|
hide: function($el) {
|
|
if ($el) {
|
|
$el.addClass('hidden');
|
|
}
|
|
},
|
|
|
|
scrollTop: function($el) {
|
|
// Scroll to top of selected element
|
|
$('html,body').animate({
|
|
scrollTop: $el.offset().top
|
|
}, 'slow');
|
|
},
|
|
|
|
show: function($el) {
|
|
if ($el) {
|
|
$el.removeClass('hidden');
|
|
}
|
|
}
|
|
},
|
|
|
|
escapeStrings: function(obj) {
|
|
_.each(obj, function(val, key) {
|
|
obj[key] = _.escape(val);
|
|
});
|
|
|
|
return obj;
|
|
},
|
|
|
|
focusFirstError: function() {
|
|
var $error = this.$form.find('.error').first(),
|
|
$field = {},
|
|
$parent = {};
|
|
|
|
if ($error.is('label')) {
|
|
$parent = $error.parent('.form-field');
|
|
$error = $parent.find('input') || $parent.find('select');
|
|
} else {
|
|
$field = $error;
|
|
}
|
|
|
|
$error.focus();
|
|
},
|
|
|
|
forgotPassword: function(event) {
|
|
event.preventDefault();
|
|
|
|
this.trigger('password-help');
|
|
},
|
|
|
|
getFormData: function() {
|
|
var obj = {},
|
|
$form = this.$form,
|
|
elements = $form[0].elements,
|
|
i,
|
|
len = elements.length,
|
|
$el,
|
|
$label,
|
|
key = '',
|
|
errors = [],
|
|
test = {};
|
|
|
|
for (i = 0; i < len; i++) {
|
|
$el = $(elements[i]);
|
|
$label = $form.find('label[for=' + $el.attr('id') + ']');
|
|
key = $el.attr('name') || false;
|
|
|
|
if (key) {
|
|
test = this.validate(elements[i]);
|
|
if (test.isValid) {
|
|
obj[key] = $el.attr('type') === 'checkbox' ? $el.is(':checked') : $el.val();
|
|
$el.removeClass('error');
|
|
$label.removeClass('error');
|
|
} else {
|
|
errors.push(test.message);
|
|
$el.addClass('error');
|
|
$label.addClass('error');
|
|
}
|
|
}
|
|
}
|
|
|
|
this.errors = _.uniq(errors);
|
|
|
|
return obj;
|
|
},
|
|
|
|
saveError: function(error) {
|
|
this.errors = ['<li>' + error.responseText + '</li>'];
|
|
this.setErrors();
|
|
this.toggleDisableButton(false);
|
|
},
|
|
|
|
setErrors: function() {
|
|
var $msg = this.$errors.find('.message-copy'),
|
|
html = [],
|
|
errors = this.errors,
|
|
i,
|
|
len = errors.length;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
html.push(errors[i]);
|
|
}
|
|
|
|
$msg.html(html.join(''));
|
|
|
|
this.element.show(this.$errors);
|
|
|
|
// Scroll to error messages
|
|
$('html,body').animate({
|
|
scrollTop: this.$errors.offset().top
|
|
}, 'slow');
|
|
|
|
// Focus on first error field
|
|
this.focusFirstError();
|
|
},
|
|
|
|
/* Allows extended views to add non-form attributes
|
|
* to the data before saving it to model
|
|
*/
|
|
setExtraData: function(data) {
|
|
return data;
|
|
},
|
|
|
|
submitForm: function(event) {
|
|
var data = this.getFormData();
|
|
|
|
if (!_.isUndefined(event)) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
this.toggleDisableButton(true);
|
|
|
|
if (!_.compact(this.errors).length) {
|
|
data = this.setExtraData(data);
|
|
this.model.set(data);
|
|
this.model.save();
|
|
this.toggleErrorMsg(false);
|
|
} else {
|
|
this.toggleErrorMsg(true);
|
|
}
|
|
|
|
this.postFormSubmission();
|
|
},
|
|
|
|
/* Allows extended views to add custom
|
|
* code after form submission
|
|
*/
|
|
postFormSubmission: function() {
|
|
return true;
|
|
},
|
|
|
|
toggleErrorMsg: function(show) {
|
|
if (show) {
|
|
this.setErrors();
|
|
this.toggleDisableButton(false);
|
|
} else {
|
|
this.element.hide(this.$errors);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* If a form button is defined for this form, this will disable the button on
|
|
* submit, and re-enable the button if an error occurs.
|
|
*
|
|
* Args:
|
|
* disabled (boolean): If set to TRUE, disable the button.
|
|
*
|
|
*/
|
|
toggleDisableButton: function(disabled) {
|
|
if (this.$submitButton) {
|
|
this.$submitButton.attr('disabled', disabled);
|
|
}
|
|
},
|
|
|
|
validate: function($el) {
|
|
return EdxUtilsValidate.validate($el);
|
|
}
|
|
});
|
|
});
|
|
}).call(this, define || RequireJS.define);
|