Skip to content

E
edx-platform
Commit 30b95eef by Uman Shahzad
Options

Disable positive validations on form submission.

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