From c38ea7e8843660ae9993ad8f515866113bbcc4f5 Mon Sep 17 00:00:00 2001
From: Jiaan <3468028-jiaan@users.noreply.gitlab.com>
Date: Thu, 6 Jun 2019 07:39:59 +0000
Subject: Resolve "Inline validation for user's name and username length"

---
 .../javascripts/validators/input_validator.js      | 34 ++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 app/assets/javascripts/validators/input_validator.js

(limited to 'app/assets/javascripts/validators/input_validator.js')

diff --git a/app/assets/javascripts/validators/input_validator.js b/app/assets/javascripts/validators/input_validator.js
new file mode 100644
index 00000000000..f37373977b8
--- /dev/null
+++ b/app/assets/javascripts/validators/input_validator.js
@@ -0,0 +1,34 @@
+const invalidInputClass = 'gl-field-error-outline';
+
+export default class InputValidator {
+  constructor() {
+    this.inputDomElement = {};
+    this.inputErrorMessage = {};
+    this.errorMessage = null;
+    this.invalidInput = null;
+  }
+
+  setValidationStateAndMessage() {
+    this.setValidationMessage();
+
+    const isInvalidInput = !this.inputDomElement.checkValidity();
+    this.inputDomElement.classList.toggle(invalidInputClass, isInvalidInput);
+    this.inputErrorMessage.classList.toggle('hide', !isInvalidInput);
+  }
+
+  setValidationMessage() {
+    if (this.invalidInput) {
+      this.inputDomElement.setCustomValidity(this.errorMessage);
+      this.inputErrorMessage.innerHTML = this.errorMessage;
+    } else {
+      this.resetValidationMessage();
+    }
+  }
+
+  resetValidationMessage() {
+    if (this.inputDomElement.validationMessage === this.errorMessage) {
+      this.inputDomElement.setCustomValidity('');
+      this.inputErrorMessage.innerHTML = this.inputDomElement.title;
+    }
+  }
+}
-- 
cgit v1.2.3