Skip to content

E
edx-platform
Commit 30b95eef by Uman Shahzad
Options

Disable positive validations on form submission.

parent cb034d4f
Showing with 56 additions and 74 deletions
common/static/common/js/utils/edx.utils.validate.js
......@@ -21,7 +21,7 @@
var _fn = {
validate: {
template: _.template('<li id="<%- id %>-validation-error-container"><%- content %></li>'),
template: _.template('<li><%- content %></li>'),
msg: {
email: gettext("The email address you've provided isn't formatted correctly."),
......@@ -32,7 +32,6 @@
field: function(el) {
var $el = $(el),
id = $el.attr('id'),
required = true,
min = true,
max = true,
......@@ -67,8 +66,6 @@
});
}
response.id = id;
return response;
},
......@@ -135,16 +132,21 @@
label,
context,
content,
customMsg;
customMsg,
liveValidationMsg;
_.each(tests, function(value, key) {
if (!value) {
label = _fn.validate.getLabel($el.attr('id'));
customMsg = $el.data('errormsg-' + key) || false;
liveValidationMsg =
$('#' + $el.attr('id') + '-validation-error-msg').text() || false;
// If the field has a custom error msg attached, use it
if (customMsg) {
content = customMsg;
} else if (liveValidationMsg) {
content = liveValidationMsg;
} else {
context = {field: label};
......@@ -158,8 +160,7 @@
}
txt.push(_fn.validate.template({
content: content,
id: $el.attr('id')
content: content
}));
}
});
......
lms/static/js/student_account/views/FormView.js
......@@ -185,6 +185,7 @@
)
];
this.renderErrors(this.defaultFormErrorsTitle, this.errors);
this.scrollToFormFeedback();
this.toggleDisableButton(false);
},
......@@ -193,14 +194,11 @@
*/
renderErrors: function(title, errorMessages) {
this.clearFormErrors();
if (title || errorMessages.length) {
this.renderFormFeedback(this.formErrorsTpl, {
jsHook: this.formErrorsJsHook,
title: title,
messagesHtml: HtmlUtils.HTML(errorMessages.join(''))
});
}
this.renderFormFeedback(this.formErrorsTpl, {
jsHook: this.formErrorsJsHook,
title: title,
messagesHtml: HtmlUtils.HTML(errorMessages.join(''))
});
},
renderFormFeedback: function(template, context) {
......@@ -208,36 +206,6 @@
HtmlUtils.prepend(this.$formFeedback, tpl(context));
},
doOnErrorList: function(id, action) {
var i;
for (i = 0; i < this.errors.length; ++i) {
if (this.errors[i].includes(id)) {
action(i);
}
}
},
updateError: function(error, id) {
this.deleteError(id);
this.addError(error, id);
},
deleteError: function(id) {
var self = this;
this.doOnErrorList(id, function(index) {
self.errors.splice(index, 1);
});
},
addError: function(error, id) {
this.errors.push(StringUtils.interpolate(
'<li id="{errorId}">{error}</li>', {
errorId: id,
error: error
}
));
},
/* Allows extended views to add non-form attributes
* to the data before saving it to model
*/
......@@ -261,14 +229,7 @@
this.clearFormErrors();
} else {
this.renderErrors(this.defaultFormErrorsTitle, this.errors);
// Scroll to feedback container
$('html,body').animate({
scrollTop: this.$formFeedback.offset().top
}, 'slow');
// Focus on the feedback container to ensure screen readers see the messages.
this.$formFeedback.focus();
this.scrollToFormFeedback();
this.toggleDisableButton(false);
}
......@@ -282,6 +243,10 @@
return true;
},
resetValidationVariables: function() {
return true;
},
clearFormErrors: function() {
var query = '.' + this.formErrorsJsHook;
this.clearFormFeedbackItems(query);
......@@ -308,6 +273,19 @@
}
},
scrollToFormFeedback: function() {
var self = this;
// Scroll to feedback container
$('html,body').animate({
scrollTop: this.$formFeedback.offset().top
}, 'slow', function() {
self.resetValidationVariables();
});
// Focus on the feedback container to ensure screen readers see the messages.
this.$formFeedback.focus();
},
validate: function($el) {
return EdxUtilsValidate.validate($el);
},
......
lms/static/js/student_account/views/RegisterView.js
......@@ -43,6 +43,9 @@
positiveValidationIcon: 'fa-check',
negativeValidationIcon: 'fa-exclamation',
successfulValidationDisplaySeconds: 3,
// These are reset to true on form submission.
positiveValidationEnabled: true,
negativeValidationEnabled: true,
preRender: function(data) {
this.providers = data.thirdPartyAuth.providers || [];
......@@ -148,9 +151,9 @@
hasError = decisions.validation_decisions[name] !== '',
error = isCheckbox ? '' : decisions.validation_decisions[name];
if (hasError) {
if (hasError && this.negativeValidationEnabled) {
this.renderLiveValidationError($el, $label, $requiredTextLabel, $icon, $errorTip, error);
} else {
} else if (this.positiveValidationEnabled) {
this.renderLiveValidationSuccess($el, $label, $requiredTextLabel, $icon, $errorTip);
}
},
......@@ -265,6 +268,7 @@
)
);
this.renderErrors(this.defaultFormErrorsTitle, this.errors);
this.scrollToFormFeedback();
this.toggleDisableButton(false);
},
......@@ -275,6 +279,11 @@
}
},
resetValidationVariables: function() {
this.positiveValidationEnabled = true;
this.negativeValidationEnabled = true;
},
renderAuthWarning: function() {
var msgPart1 = gettext('You\'ve successfully signed into %(currentProvider)s.'),
msgPart2 = gettext(
......@@ -291,37 +300,31 @@
});
},
getFormData: function() {
var obj = FormView.prototype.getFormData.apply(this, arguments),
$form = this.$form,
$emailElement = $form.find('input[name=email]'),
$confirmEmail = $form.find('input[name=confirm_email]'),
elements = $form[0].elements,
submitForm: function(event) { // eslint-disable-line no-unused-vars
var elements = this.$form[0].elements,
$el,
key = '',
i;
// As per requirements, disable positive validation for submission.
this.positiveValidationEnabled = false;
for (i = 0; i < elements.length; i++) {
$el = $(elements[i]);
key = $el.attr('name') || false;
// Due to a bug in firefox, whitespaces in email type field are not removed.
// TODO: Remove this code once firefox bug is resolved.
if (key === 'email') {
$el.val($el.val().trim());
}
// Simulate live validation.
if ($el.attr('required')) {
$el.blur();
// Special case: show required string for errors even if we're not focused.
if ($el.hasClass('error')) {
this.renderRequiredMessage($el);
}
}
}
FormView.prototype.submitForm.apply(this, arguments);
},
getFormData: function() {
var obj = FormView.prototype.getFormData.apply(this, arguments),
$emailElement = this.$form.find('input[name=email]'),
$confirmEmail = this.$form.find('input[name=confirm_email]');
if ($confirmEmail.length) {
if (!$confirmEmail.val() || ($emailElement.val() !== $confirmEmail.val())) {
this.errors.push(StringUtils.interpolate('<li>{error}</li>', {
......
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