diff options
author | Jiaan <3468028-jiaan@users.noreply.gitlab.com> | 2019-06-06 07:39:59 +0000 |
---|---|---|
committer | Kushal Pandya <kushalspandya@gmail.com> | 2019-06-06 07:39:59 +0000 |
commit | c38ea7e8843660ae9993ad8f515866113bbcc4f5 (patch) | |
tree | 243110d63235abff3cb8c0fcc9e4fe9be5dcc51e /app/assets/javascripts/pages/sessions/new/length_validator.js | |
parent | 5caffe48a9a8bc4d22a9949499cb5040e0f3f673 (diff) | |
download | gitlab-ce-c38ea7e8843660ae9993ad8f515866113bbcc4f5.tar.gz |
Resolve "Inline validation for user's name and username length"
Diffstat (limited to 'app/assets/javascripts/pages/sessions/new/length_validator.js')
-rw-r--r-- | app/assets/javascripts/pages/sessions/new/length_validator.js | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/sessions/new/length_validator.js b/app/assets/javascripts/pages/sessions/new/length_validator.js new file mode 100644 index 00000000000..3d687ca08cc --- /dev/null +++ b/app/assets/javascripts/pages/sessions/new/length_validator.js @@ -0,0 +1,32 @@ +import InputValidator from '../../../validators/input_validator'; + +const errorMessageClass = 'gl-field-error'; + +export default class LengthValidator extends InputValidator { + constructor(opts = {}) { + super(); + + const container = opts.container || ''; + const validateLengthElements = document.querySelectorAll(`${container} .js-validate-length`); + + validateLengthElements.forEach(element => + element.addEventListener('input', this.eventHandler.bind(this)), + ); + } + + eventHandler(event) { + this.inputDomElement = event.target; + this.inputErrorMessage = this.inputDomElement.parentElement.querySelector( + `.${errorMessageClass}`, + ); + + const { value } = this.inputDomElement; + const { maxLengthMessage, maxLength } = this.inputDomElement.dataset; + + this.errorMessage = maxLengthMessage; + + this.invalidInput = value.length > parseInt(maxLength, 10); + + this.setValidationStateAndMessage(); + } +} |