1import ApplicationController from './application_controller';
 2import Email from '../models/email';
 3import FormValidation from '../models/form_validation';
 4import I18n from '../i18n';
 5
 6export default class extends ApplicationController {
 7  get form() { return this.element.closest('form'); }
 8
 9  get formValidation() { return new FormValidation(this.form); }
10
11  get submitButton() { return this.form.querySelector('[type=submit]'); }
12
13  changed() {
14    this.validate(this.element);
15
16    if (this.formValidation.valid()) super.enable(this.submitButton);
17  }
18
19  validate(element) {
20    const isRequired = element.getAttribute('required') === 'required';
21    if (isRequired && element.value.length === 0) {
22      return this.displayError(I18n.translate('js.form.errors.required'));
23    }
24
25    const isEmail = element.getAttribute('type') === 'email';
26    if (isEmail && new Email(element.value).invalid()) {
27      return this.displayError(I18n.translate('js.form.errors.invalid'));
28    }
29
30    const minLength = element.getAttribute('minlength');
31    if (minLength && element.value.length < parseInt(minLength, 10)) {
32      return this.displayError(I18n.translate('js.form.errors.too_short'));
33    }
34
35    const maxLength = element.getAttribute('maxlength');
36    if (maxLength && element.value.length > parseInt(maxLength, 10)) {
37      return this.displayError(I18n.translate('js.form.errors.too_long'));
38    }
39
40    const isEqualTo = element.getAttribute('data-is-equal-to');
41    if (isEqualTo && document.querySelector(isEqualTo).value !== element.value) {
42      return this.displayError(I18n.translate('js.form.errors.confirmation'));
43    }
44
45    return this.hideError();
46  }
47
48  hideError() {
49    this.data.set('valid', true);
50    this.element.classList.remove('is-danger');
51    const controlElement = this.element.parentElement;
52    const fieldElement = controlElement.parentElement;
53    const helpElement = fieldElement.querySelector('.help');
54    if (helpElement) {
55      helpElement.textContent = '';
56      helpElement.classList.remove('is-danger');
57      super.hide(helpElement);
58    }
59  }
60
61  displayError(message) {
62    this.data.set('valid', false);
63    super.disable(this.submitButton);
64    this.element.classList.add('is-danger');
65    const controlElement = this.element.parentElement;
66    const fieldElement = controlElement.parentElement;
67    const helpElement = fieldElement.querySelector('.help');
68    if (helpElement) {
69      helpElement.textContent = message;
70      helpElement.classList.add('is-danger');
71      super.show(helpElement);
72    }
73  }
74}