diff options
author | Bryce Johnson <bryce@gitlab.com> | 2016-10-21 13:49:09 +0200 |
---|---|---|
committer | Bryce Johnson <bryce@gitlab.com> | 2016-11-01 16:48:37 +0100 |
commit | 93bd3dd8a8f587dc860c72653364d853c27bc6fd (patch) | |
tree | b45644f71d9e21dec030480570d56848eda8ae12 /app/assets/javascripts | |
parent | aba94f65f039908d14643f3854e3c2901ff843aa (diff) | |
download | gitlab-ce-93bd3dd8a8f587dc860c72653364d853c27bc6fd.tar.gz |
Upgrade gl_field_errors to support more use cases.
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r-- | app/assets/javascripts/gl_field_errors.js.es6 | 54 | ||||
-rw-r--r-- | app/assets/javascripts/username_validator.js.es6 | 1 |
2 files changed, 47 insertions, 8 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) { diff --git a/app/assets/javascripts/username_validator.js.es6 b/app/assets/javascripts/username_validator.js.es6 index c4dde575c6e..023ec0838dc 100644 --- a/app/assets/javascripts/username_validator.js.es6 +++ b/app/assets/javascripts/username_validator.js.es6 @@ -25,7 +25,6 @@ this.inputElement.on('keyup.username_check', () => { const username = this.inputElement.val(); - this.state.valid = this.inputDomElement.validity.valid; this.state.empty = !username.length; |