Upgrade gl_field_errors to support more use cases.

1 files changed, 47 insertions, 7 deletions

diff --git a/app/assets/javascripts/gl_field_errors.js.es6 b/app/assets/javascripts/gl_field_errors.js.es6
index be6c3ec274f..fa3e131c43b 100644
--- a/app/assets/javascripts/gl_field_errors.js.es6
+++ b/app/assets/javascripts/gl_field_errors.js.es6
@@ -4,18 +4,56 @@
    * This class overrides the browser's validation error bubbles, displaying custom
    * error messages for invalid fields instead. To begin validating any form, add the
    * class `show-gl-field-errors` to the form element, and ensure error messages are
-   * declared in each inputs' title attribute.
+   * declared in each inputs' `title` attribute. If no title is declared for an invalid
+   * field the user attempts to submit, "This field is required." will be shown by default.
    *
-   * Example:
+   * Opt not to validate certain fields by adding the class `gl-field-error-ignore` to the input.
+   *
+   * Set a custom error anchor for error message to be injected after with the class `gl-field-error-anchor`
+   *
+   * Examples:
+   *
+   * Basic:
    *
    * <form class='show-gl-field-errors'>
    *  <input type='text' name='username' title='Username is required.'/>
-   *</form>
+   * </form>
+   *
+   * Ignore specific inputs (e.g. UsernameValidator):
+   *
+   * <form class='show-gl-field-errors'>
+   *   <div class="form-group>
+   *     <input type='text' class='gl-field-errors-ignore' pattern='[a-zA-Z0-9-_]+'/>
+   *   </div>
+   *   <div class="form-group">
+   *      <input type='text' name='username' title='Username is required.'/>
+   *    </div>
+   * </form>
+   *
+   * Custom Error Anchor (allows error message to be injected after specified element):
    *
+   * <form class='show-gl-field-errors'>
+   *  <div class="form-group gl-field-error-anchor">
+   *    <input type='text' name='username' title='Username is required.'/>
+   *    // Error message typically injected here
+   *  </div>
+   *  // Error message now injected here
+   * </form>
+   *
+    * */
+
+  /*
+    * Regex Patterns in use:
+    *
+    * Only alphanumeric: : "[a-zA-Z0-9]+"
+    * No special characters : "[a-zA-Z0-9-_]+",
+    *
     * */
 
   const errorMessageClass = 'gl-field-error';
   const inputErrorClass = 'gl-field-error-outline';
+  const errorAnchorSelector = '.gl-field-error-anchor';
+  const ignoreInputSelector = '.gl-field-error-ignore';
 
   class GlFieldError {
     constructor({ input, formErrors }) {
@@ -34,16 +72,18 @@
     }
 
     initFieldValidation() {
+      const customErrorAnchor = this.inputElement.parents(errorAnchorSelector);
+      const errorAnchor = customErrorAnchor.length ? customErrorAnchor : this.inputElement;
+
       // hidden when injected into DOM
-      this.inputElement.after(this.fieldErrorElement);
+      errorAnchor.after(this.fieldErrorElement);
       this.inputElement.off('invalid').on('invalid', this.handleInvalidSubmit.bind(this));
       this.scopedSiblings = this.safelySelectSiblings();
     }
 
     safelySelectSiblings() {
       // Apply `ignoreSelector` in markup to siblings whose visibility should not be toggled with input validity
-      const ignoreSelector = '.validation-ignore';
-      const unignoredSiblings = this.inputElement.siblings(`p:not(${ignoreSelector})`);
+      const unignoredSiblings = this.inputElement.siblings(`p:not(${ignoreInputSelector})`);
       const parentContainer = this.inputElement.parent('.form-group');
 
       // Only select siblings when they're scoped within a form-group with one input
@@ -125,7 +165,7 @@
     }
   }
 
-  const customValidationFlag = 'no-gl-field-errors';
+  const customValidationFlag = 'gl-field-error-ignore';
 
   class GlFieldErrors {
     constructor(form) {