Resolve "Inline validation for user's name and username length"

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