表單驗證失敗提示方案（自用）

方案

動態計算定位，fixed於失敗項附近，並定時消失，多個提示一同顯示。

遇到問題

當表單處於dialog中，而且表單高度大於dialog高度，驗證失敗項又恰好在被overflow隱藏的部分，須要對這部分提示作特殊處理，暫且處理爲不顯示這部分提示。問題如圖：

解決問題

• 判斷是否處在dialog中
• 判斷驗證失敗項是否在overflow隱藏部分

判斷是否處在dialog中

function nodeParents (elm, cls) {
  let parent = elm.parentNode
  while (parent && !parent.classList.contains(cls)) {
    parent = parent.parentNode
  }
  return parent
}

判斷驗證失敗項是否在overflow隱藏部分

function visibleInDialog (elm, parent) {
  const rect1 = elm.getBoundingClientRect()
  const rect2 = parent.getBoundingClientRect()
  return rect1.bottom < rect2.bottom && rect1.top > rect2.top
}

最終

const dialog = nodeParents(elm, 'dialog')
if (dialog && visibleInDialog(elm, dialog) || !dialog) {
    errorTip(tip)
}