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