Add latest changes from gitlab-org/gitlab@master

1 files changed, 56 insertions, 0 deletions

diff --git a/app/assets/javascripts/validators/length_validator.js b/app/assets/javascripts/validators/length_validator.js
new file mode 100644
index 00000000000..6ce453fe40b
--- /dev/null
+++ b/app/assets/javascripts/validators/length_validator.js
@@ -0,0 +1,56 @@
+import InputValidator from '~/validators/input_validator';
+
+const errorMessageClass = 'gl-field-error';
+
+export const isAboveMaxLength = (str, maxLength) => {
+  return str.length > parseInt(maxLength, 10);
+};
+
+export const isBelowMinLength = (value, minLength, allowEmpty) => {
+  const isValueNotAllowedOrNotEmpty = allowEmpty !== 'true' || value.length !== 0;
+  const isValueBelowMinLength = value.length < parseInt(minLength, 10);
+  return isValueBelowMinLength && isValueNotAllowedOrNotEmpty;
+};
+
+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 {
+      minLength,
+      minLengthMessage,
+      maxLengthMessage,
+      maxLength,
+      allowEmpty,
+    } = this.inputDomElement.dataset;
+
+    this.invalidInput = false;
+
+    if (isAboveMaxLength(value, maxLength)) {
+      this.invalidInput = true;
+      this.errorMessage = maxLengthMessage;
+    }
+
+    if (isBelowMinLength(value, minLength, allowEmpty)) {
+      this.invalidInput = true;
+      this.errorMessage = minLengthMessage;
+    }
+
+    this.setValidationStateAndMessage();
+  }
+}