cheetah-framework/js/framework/form/FormErrorHelper.js

Cheetah Framework JS used in all our applications

import FormErrors from './errors'
import VueScrollTo from 'vue-scrollto'

export default {
  props: {
    formNamePrefix: {
      type: String,
      default: null
    }
  },

  data () {
    return {
      formErrors: null
    }
  },

  computed: {
    namePrefix () {
      return this.formNamePrefix ? (_.trim(this.formNamePrefix, '.') + '.') : ''
    }
  },

  methods: {
    hasError (key, forceKey = false) {
      return this.formErrors.has(
        forceKey
          ? key
          : this.namePrefix + key
      ) !== false
    },
    errorMessage (key, forceKey = false) {
      return this.formErrors.get(
        forceKey
          ? key
          : this.namePrefix + key
      )
    },
    clearError (key, forceKey = false) {
      this.formErrors.forget(
        forceKey
          ? key
          : this.namePrefix + key
      )
    },
    addError (key, errors, forceKey = false) {
      this.formErrors.add(
        forceKey
          ? key
          : this.namePrefix + key,
        errors
      )
    },
    scrollToFirstError (error) {
      this.$nextTick(() => {
        const firstError = document.getElementsByClassName('is-error')[0]

        if (!firstError) {
          RemoteErrors(error)
          return
        }

        let errorInput = firstError.querySelector('input')

        if (!errorInput) {
          errorInput = firstError.querySelector('textarea')
        }

        if (errorInput) {
          errorInput.focus()
        }

        const offset = _.get(document.getElementsByClassName('c-header'), '0.offsetHeight') || 0

        VueScrollTo.scrollTo(firstError, 600, {
          easing: 'ease',
          offset: (offset * -1) - 30
        })
      })
    },
    /**
     * return full path of fieldName containing formNamePrefix
     * @param {String} fieldName
     */
    getFieldName (fieldName) {
      return this.namePrefix + fieldName
    }
  },

  created () {
    let parent = this.$parent

    // backward compatibility
    if (this.form && this.form.formErrors) {
      this.formErrors = this.form.formErrors
      return
    }

    if (this.$options.formHelper !== true) {
      while (parent) {
        if (parent.formErrors) {
          this.formErrors = parent.formErrors
          return
        } else if (parent.form && parent.form.errors) { // old form compatibility
          this.formErrors = parent.form.errors
          return
        }

        parent = parent.$parent
      }
    }

    this.formErrors = new FormErrors()
  }
}