Fix errors, get validation running for signup box and sign in.

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();
     }
   }

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() {

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.