From 00bfb645e16b24ce929211bf5080aa3083f8543b Mon Sep 17 00:00:00 2001
From: Bryce Johnson <bryce@gitlab.com>
Date: Fri, 23 Sep 2016 10:29:21 +0200
Subject: [PATCH] Fix errors, get validation running for signup box and sign
in.
---
app/assets/javascripts/gl_field_errors.js.es6 | 52 +++++++++++--------
.../javascripts/username_validator.js.es6 | 12 ++---
app/views/devise/shared/_signup_box.html.haml | 2 +-
3 files changed, 38 insertions(+), 28 deletions(-)
diff --git a/app/assets/javascripts/gl_field_errors.js.es6 b/app/assets/javascripts/gl_field_errors.js.es6
index f4c09dd407d..e1de7f78efc 100644
--- a/app/assets/javascripts/gl_field_errors.js.es6
+++ b/app/assets/javascripts/gl_field_errors.js.es6
@@ -17,10 +17,10 @@
const inputErrorClass = 'gl-field-error-outline';
class GlFieldError {
- constructor({ input, form }) {
+ constructor({ input, formErrors }) {
this.inputElement = $(input);
this.inputDomElement = this.inputElement.get(0);
- this.form = form;
+ this.form = formErrors;
this.errorMessage = this.inputElement.attr('title') || 'This field is required.';
this.fieldErrorElement = $(`<p class='${errorMessageClass} hide'>${ this.errorMessage }</p>`);
@@ -34,7 +34,7 @@
initFieldValidation() {
// hidden when injected into DOM
- $input.after(this.fieldErrorElement);
+ this.inputElement.after(this.fieldErrorElement);
this.inputElement.off('invalid').on('invalid', this.handleInvalidInput.bind(this));
}
@@ -42,24 +42,24 @@
this.setClearState();
if (this.state.valid) {
- this.setValidState();
+ return this.setValidState();
}
if (this.state.empty) {
- this.setEmptyState();
+ return this.setEmptyState();
}
if (!this.state.valid) {
- this.setInvalidState();
+ return this.setInvalidState();
}
- this.form.focusOnFirstInvalid.apply(this);
+ this.form.focusOnFirstInvalid.apply(this.form);
}
handleInvalidInput(event) {
event.preventDefault();
- this.state.valid = true;
+ this.state.valid = false;
this.state.empty = false;
this.renderValidity();
@@ -77,8 +77,7 @@
updateValidityState() {
const inputVal = this.inputElement.val();
this.state.empty = !!inputVal.length;
- this.state.valid = this.getInputValidity;
-
+ this.state.valid = this.getInputValidity();
this.renderValidity();
}
@@ -87,17 +86,24 @@
}
setEmptyState() {
- return this.setClearState();
+ return this.setInvalidState();
}
setInvalidState() {
- $input.addClass(inputErrorClass);
- return this.$fieldErrorElement.show();
+ this.inputElement.addClass(inputErrorClass);
+ this.inputElement.siblings('p').hide();
+ return this.fieldErrorElement.show();
}
setClearState() {
- $input.removeClass(inputErrorClass);
- return this.fieldErrorElement.hide();
+ const inputVal = this.inputElement.val();
+ if (!inputVal.split(' ').length) {
+ const trimmedInput = this.inputElement.val().trim();
+ this.inputElement.val(trimmedInput);
+ }
+ this.inputElement.removeClass(inputErrorClass);
+ this.inputElement.siblings('p').hide();
+ this.fieldErrorElement.hide();
}
checkFieldValidity(target) {
@@ -105,19 +111,23 @@
}
}
+ const customValidationFlag = 'no-gl-field-errors';
+
class GlFieldErrors {
constructor(form) {
this.form = $(form);
+ this.state = {
+ inputs: [],
+ valid: false
+ };
this.initValidators();
}
initValidators () {
// select all non-hidden inputs in form
- const form = this.form;
-
- this.inputs = this.form.find(':input:not([type=hidden])')
- .toArray()
- .map((input) => new GlFieldError({ input, form }));
+ this.state.inputs = this.form.find(':input:not([type=hidden])').toArray()
+ .filter((input) => !input.classList.contains(customValidationFlag))
+ .map((input) => new GlFieldError({ input, formErrors: this }));
this.form.on('submit', this.catchInvalidFormSubmit);
}
@@ -134,7 +144,7 @@
}
focusOnFirstInvalid () {
- const firstInvalid = this.inputs.find((input) => !input.validity.valid);
+ const firstInvalid = this.state.inputs.find((input) => !input.inputDomElement.validity.valid);
$(firstInvalid).focus();
}
}
diff --git a/app/assets/javascripts/username_validator.js.es6 b/app/assets/javascripts/username_validator.js.es6
index a22f598b753..b19fb9b4771 100644
--- a/app/assets/javascripts/username_validator.js.es6
+++ b/app/assets/javascripts/username_validator.js.es6
@@ -19,7 +19,7 @@
};
const debounceTimeout = _.debounce((username) => {
- this.state.validateUsername(username);
+ this.validateUsername(username);
}, debounceTimeoutDuration);
this.inputElement.on('keyup.username_check', () => {
@@ -78,7 +78,7 @@
type: 'GET',
url: `/u/${username}/exists`,
dataType: 'json',
- success: (res) => this.updateValidationState(res.exists)
+ success: (res) => this.setAvailabilityState(res.exists)
});
}
}
@@ -96,10 +96,10 @@
clearFieldValidationState() {
// TODO: Double check if this is valid chaining
- const $input = this.inputElement
- .siblings('p').hide().end()
- .removeClass(invalidInputClass);
- removeClass(successInputClass);
+ this.inputElement.siblings('p').hide();
+
+ this.inputElement.removeClass(invalidInputClass)
+ .removeClass(successInputClass);
}
setUnavailableState() {
diff --git a/app/views/devise/shared/_signup_box.html.haml b/app/views/devise/shared/_signup_box.html.haml
index c43a6aa3e49..7382042cc50 100644
--- a/app/views/devise/shared/_signup_box.html.haml
+++ b/app/views/devise/shared/_signup_box.html.haml
@@ -8,7 +8,7 @@
= f.text_field :name, class: "form-control top", required: true, title: "This field is required."
%div.username.form-group
= f.label :username
- = f.text_field :username, class: "form-control middle", pattern: "[a-zA-Z0-9]+", required: true
+ = f.text_field :username, class: "form-control middle no-gl-field-error", pattern: "[a-zA-Z0-9]+", required: true
%p.gl-field-error.hide Please create a username with only alphanumeric characters.
%p.validation-error.hide Username is already taken.
%p.validation-success.hide Username is available.
--
GitLab