Refactor gl field errors for simpler state management.

app/assets/javascripts/gl_field_errors.js.es6

@@ -13,79 +13,123 @@
    *
     * */
 
-  const fieldErrorClass = 'gl-field-error';
-  const fieldErrorSelector = `.${fieldErrorClass}`;
+  const errorMessageClass = 'gl-field-error';
   const inputErrorClass = 'gl-field-error-outline';
 
-  class GlFieldErrors {
-    constructor(form) {
-      this.form = $(form);
-      this.initValidators();
+  class GlFieldError {
+    constructor({ input, form }) {
+      this.inputElement = $(input);
+      this.inputDomElement = this.inputElement.get(0);
+      this.form = form;
+      this.errorMessage = this.inputElement.attr('title') || 'This field is required.';
+      this.fieldErrorElement = $(`<p class='${errorMessageClass} hide'>${ this.errorMessage }</p>`);
+
+      this.state = {
+        valid: false,
+        empty: true
+      };
+
+      this.initFieldValidation();
     }
 
-    initValidators () {
-      this.inputs = this.form.find(':input:not([type=hidden])').toArray();
-      this.inputs.forEach((input) => {
-        $(input).off('invalid').on('invalid', this.handleInvalidInput.bind(this));
-      });
-      this.form.on('submit', this.catchInvalidFormSubmit);
+    initFieldValidation() {
+      // hidden when injected into DOM
+      $input.after(this.fieldErrorElement);
+      this.inputElement.off('invalid').on('invalid', this.handleInvalidInput.bind(this));
     }
 
-    /* Neccessary because Safari & iOS quietly allow form submission when form is invalid */
-    catchInvalidFormSubmit (event) {
-      if (!event.currentTarget.checkValidity()) {
-        event.preventDefault();
-        // Prevents disabling of invalid submit button by application.js
-        event.stopPropagation();
+    renderValidity() {
+      this.setClearState();
+
+      if (this.state.valid) {
+        this.setValidState();
+      }
+
+      if (this.state.empty) {
+        this.setEmptyState();
       }
+
+      if (!this.state.valid) {
+        this.setInvalidState();
       }
 
-    handleInvalidInput (event) {
+      this.form.focusOnFirstInvalid.apply(this);
+    }
+
+    handleInvalidInput(event) {
       event.preventDefault();
-      this.updateFieldValidityState(event);
 
-      const $input = $(event.currentTarget);
+      this.state.valid = true;
+      this.state.empty = false;
+
+      this.renderValidity();
 
       // For UX, wait til after first invalid submission to check each keyup
-      $input.off('keyup.field_validator')
-        .on('keyup.field_validator', this.updateFieldValidityState.bind(this));
+      this.inputElement.off('keyup.field_validator')
+        .on('keyup.field_validator', this.updateValidityState.bind(this));
 
     }
 
-    displayFieldValidity (target, isValid) {
-      const $input = $(target).removeClass(inputErrorClass);
-      const $existingError = $input.siblings(fieldErrorSelector);
-      const alreadyInvalid = !!$existingError.length;
-      const implicitErrorMessage = $input.attr('title');
-      const $errorToDisplay = alreadyInvalid ? $existingError.detach() : $(`<p class="${fieldErrorClass}">${implicitErrorMessage}</p>`);
+    getInputValidity() {
+      return this.inputDomElement.validity.valid;
+    }
 
-      if (!isValid) {
-        $input.after($errorToDisplay);
-        $input.addClass(inputErrorClass);
+    updateValidityState() {
+      const inputVal = this.inputElement.val();
+      this.state.empty = !!inputVal.length;
+      this.state.valid = this.getInputValidity;
+
+      this.renderValidity();
     }
 
-      this.updateFieldSiblings($errorToDisplay, isValid);
+    setValidState() {
+      return this.setClearState();
     }
 
-    updateFieldSiblings($target, isValid) {
-      const siblings = $target.siblings(`p${fieldErrorSelector}`);
-      return isValid ? siblings.show() : siblings.hide();
+    setEmptyState() {
+      return this.setClearState();
+    }
+
+    setInvalidState() {
+      $input.addClass(inputErrorClass);
+      return this.$fieldErrorElement.show();
+    }
+
+    setClearState() {
+      $input.removeClass(inputErrorClass);
+      return this.fieldErrorElement.hide();
     }
 
     checkFieldValidity(target) {
       return target.validity.valid;
     }
+  }
 
-    updateFieldValidityState(event) {
-      const target = event.currentTarget;
-      const isKeyup = event.type === 'keyup';
-      const isValid = this.checkFieldValidity(target);
+  class GlFieldErrors {
+    constructor(form) {
+      this.form = $(form);
+      this.initValidators();
+    }
 
-      this.displayFieldValidity(target, isValid);
+    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.form.on('submit', this.catchInvalidFormSubmit);
+    }
 
-      // prevent changing focus while user is typing.
-      if (!isKeyup) {
-        this.focusOnFirstInvalid.apply(this);
+    /* Neccessary to prevent intercept and override invalid form submit
+     * because Safari & iOS quietly allow form submission when form is invalid
+     * and prevents disabling of invalid submit button by application.js */
+
+    catchInvalidFormSubmit (event) {
+      if (!event.currentTarget.checkValidity()) {
+        event.preventDefault();
+        event.stopPropagation();
       }
     }