Form Validation using HTML5 constraint API

form-validation.js

const HAS_ERROR_CLASS = 'has-error';
const ERROR_MESSAGE_CLASS = 'FormGroup-feedback';
const SELECTORS = {
  errorMessage: `.${ERROR_MESSAGE_CLASS}`
};

const FormValidation = {
  init() {
    let forms = window.document.querySelectorAll('[data-validate]');
    if (!forms) return;

    forms = Array.prototype.slice.call(forms);
    forms.forEach(form => FormValidation.addFormEvents(form));
  },

  addFormEvents(form) {
    const formElements = Array.prototype.slice.call(form.elements);
    const submitButton = form.querySelector('input[type="submit"]');

    submitButton.addEventListener('click', () => {
      FormValidation.validateFields(formElements);
    });

    formElements.forEach(FormValidation.fieldEvents);
  },

  fieldEvents(element) {
    // remove default HTML bubble validation message
    element.addEventListener('invalid', (e) => {
      e.preventDefault();
    });

    element.addEventListener('blur', () => {
      FormValidation.validateField(element);
    });
  },

  validateFields(fields) {
    fields.forEach(FormValidation.validateField);
  },

  createErrorMessageTag(message) {
    const errorMessageTag = document.createElement('P');
    errorMessageTag.classList.add(ERROR_MESSAGE_CLASS);
    errorMessageTag.innerHTML = message;
    return errorMessageTag;
  },

  getErrorMessage(field, customMessages) {
    let errorMessage = field.validationMessage;

    errorMessage =
      field.validity.patternMismatch && customMessages.patternMismatch
        ? customMessages.patternMismatch
        : errorMessage;

    errorMessage =
      field.validity.valueMissing && customMessages.valueMissing
        ? customMessages.valueMissing
        : errorMessage;

    return errorMessage;
  },

  validateField(field) {
    const formGroup = field.parentElement;

    const customValidationErrorMessages = {
      valueMissing: formGroup.getAttribute('data-error-required'),
      patternMismatch: formGroup.getAttribute('data-error-pattern')
    };

    let errorMessageWrapper = formGroup.querySelector(SELECTORS.errorMessage);
    if (errorMessageWrapper) {
      formGroup.removeChild(errorMessageWrapper);
    }
    field.setCustomValidity('');

    if (!field.checkValidity()) {
      const errorMessage = FormValidation.getErrorMessage(field, customValidationErrorMessages);
      errorMessageWrapper = FormValidation.createErrorMessageTag(errorMessage);
      formGroup.appendChild(errorMessageWrapper);
      formGroup.classList.add(HAS_ERROR_CLASS);
    } else {
      formGroup.classList.remove(HAS_ERROR_CLASS);
    }
  }
};

export default FormValidation;