app/assets/javascripts/validators/input_validator.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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;
    }
  }
}