webpack-bootstrap-ui-kit/src/js_old/_components/_ui.form.validate.field.js

"use strict";

import $ from "jquery";
import Events from "../_events";

const FormValidateField = (($) => {
  // Constants
  const NAME = "jsFormValidateField";
  const DATA_KEY = NAME;
  const $Body = $("body");

  const FieldUI = "jsFormFieldUI";

  class FormValidateField {
    constructor(el) {
      const ui = this;
      const $el = $(el);

      ui.$el = $el;

      ui._actions = $el.parents("form").children(".btn-toolbar,.form-actions");
      $el.data(DATA_KEY, this);

      // prevent browsers checks (will do it using JS)
      $el.attr("novalidate", "novalidate");

      $el.on("change focusout", (e) => {
        ui.validate(false);
      });

      $el.addClass(`${NAME}-active`);
      $el.trigger(Events.FORM_INIT_VALIDATE_FIELD);
    }

    // Public methods
    dispose() {
      const $el = ui.$el;

      $el.removeClass(`${NAME}-active`);
      $.removeData(ui.$el[0], DATA_KEY);
      ui.$el = null;
    }

    validate(scrollTo = true) {
      const ui = this;
      const $el = ui.$el;

      const $field = $el.closest(".field");
      const extraChecks = $el.data(`${NAME}-extra`);
      let valid = true;
      let msg = null;

      const val = $el.val();

      // browser checks
      if (!ui.$el[0].checkValidity()) {
        valid = false;
        console.warn(
          `${NAME}: Browser check validity is failed #${$el.attr("id")}`
        );
      }

      let unmaskedVal = val;
      if (typeof $el.inputmask === "function") {
        unmaskedVal = $el.inputmask("unmaskedvalue");
      }

      // required
      if (
        $el.hasClass("required") &&
        (!unmaskedVal.length ||
          !unmaskedVal.trim().length ||
          (ui.isHtml(val) && !$(unmaskedVal).text().length))
      ) {
        valid = false;
        console.warn(`${NAME}: Required field is missing #${$el.attr("id")}`);
      }

      // validate URL
      if (
        $el.hasClass("url") &&
        unmaskedVal.length &&
        !ui.valideURL(unmaskedVal)
      ) {
        valid = false;

        msg =
          "Invalid URL: URL must start with http:// or https://. For example: https://your-domain.com/bla-bla/?p1=b&p2=a#tag";
        console.warn(`${NAME}: Wrong URL #${$el.attr("id")}`);
      }

      // maxlength
      const maxLength = $el.attr("maxlength");
      if (unmaskedVal.length && maxLength && maxLength.length) {
        if (unmaskedVal.length > maxLength) {
          valid = false;

          msg = `The value is limited to ${maxLength} chars`;
          console.warn(`${NAME}: Too long value #${$el.attr("id")}`);
        }
      }

      // minlength
      const minLength = $el.attr("minlength");
      if (unmaskedVal.length && minLength && minLength.length) {
        if (unmaskedVal.length < minLength) {
          valid = false;

          msg = `The value should contain more than ${minLength} chars`;
          console.warn(`${NAME}: Too short value #${$el.attr("id")}`);
        }
      }

      this.removeError();

      // extra checks
      if (extraChecks) {
        extraChecks.forEach((check) => {
          const result = check($el);
          valid = valid && result;
          if (!result) {
            console.log(check);
            console.warn(`${NAME}: Extra check is failed #${$el.attr("id")}`);
          }
        });
      }

      if (valid) {
        return true;
      }

      this.setError(scrollTo, msg);

      return false;
    }

    isHtml(str) {
      const doc = new DOMParser().parseFromString(str, "text/html");
      return Array.from(doc.body.childNodes).some(
        (node) => node.nodeType === 1
      );
    }

    valideURL(str) {
      let url;

      try {
        url = new URL(str);
      } catch (_) {
        return false;
      }

      return url.protocol === "http:" || url.protocol === "https:";
    }

    setError(scrollTo = true, msg = null) {
      const ui = this;
      const fieldUI = ui.$el.data(FieldUI);

      const $field = ui.$el.closest(".field");

      const bodyScroll = $Body.scrollTop();
      const pos = $field[0].getBoundingClientRect().top; //$field.offset().top;

      const rowCorrection = parseInt($field.css("font-size")) * 4;
      ui.removeError();

      $field.addClass("error");
      if (msg) {
        fieldUI.addMessage(msg, "alert-error alert-danger", scrollTo);
      } else if (pos && scrollTo) {
        $field.focus();
        $Body.scrollTop(bodyScroll + pos - rowCorrection);
      }
    }

    removeError() {
      const ui = this;
      const fieldUI = ui.$el.data(FieldUI);

      const $field = ui.$el.closest(".field");

      $field.removeClass("error");

      $field.removeClass("holder-error");
      $field.removeClass("holder-validation");
      $field.find(".alert-error").remove();
    }

    static _jQueryInterface() {
      return this.each(function () {
        // attach functionality to el
        const $el = $(this);
        let data = $el.data(DATA_KEY);

        if (!data) {
          data = new FormValidateField(this);
          $el.data(DATA_KEY, data);
        }
      });
    }
  }

  // jQuery interface
  $.fn[NAME] = FormValidateField._jQueryInterface;
  $.fn[NAME].Constructor = FormValidateField;
  $.fn[NAME].noConflict = function () {
    $.fn[NAME] = JQUERY_NO_CONFLICT;
    return FormValidateField._jQueryInterface;
  };

  return FormValidateField;
})($);

export default FormValidateField;