Add message Class

Author: GeoSot

js/src/forms/field.js

@@ -7,25 +7,26 @@
 import { typeCheckConfig } from '../util/index'
 import Messages from './messages'
 import Manipulator from '../dom/manipulator'
+import EventHandler from '../dom/event-handler'
 
 const NAME = 'field'
-const TYPE_PLACEHOLDER = '{type}'
-const CLASS_ERROR = `invalid-${TYPE_PLACEHOLDER}`
-const CLASS_INFO = `info-${TYPE_PLACEHOLDER}`
-const CLASS_SUCCESS = `valid-${TYPE_PLACEHOLDER}`
+const DATA_KEY = 'bs.field'
+const EVENT_KEY = `.${DATA_KEY}`
+const EVENT_INPUT = `input.${EVENT_KEY}`
+const CLASS_PREFIX_ERROR = 'invalid'
+const CLASS_PREFIX_INFO = 'info'
+const CLASS_PREFIX_SUCCESS = 'valid'
 const ARIA_DESCRIBED_BY = 'aria-describedby'
 const Default = {
   name: null,
   type: 'feedback', // or tooltip
-  template: `<div class="field-${TYPE_PLACEHOLDER}"></div>`,
   valid: '', // valid message to add
   invalid: '' // invalid message to add
 }
 
 const DefaultType = {
   name: 'string',
   type: 'string',
-  template: 'string',
   valid: 'string',
   invalid: 'string'
 }
@@ -37,25 +38,31 @@ class Field {
       throw new TypeError(`field with id:${this._config.name} not found`)
     }
 
-    this._errorMessages = new Messages()
-    this._helpMessages = new Messages()
-    this._successMessages = new Messages()
     this._config = this._getConfig(config)
+
+    this._errorMessages = this._getNewMessagesCollection(CLASS_PREFIX_ERROR)
+    this._helpMessages = this._getNewMessagesCollection(CLASS_PREFIX_INFO)
+    this._successMessages = this._getNewMessagesCollection(CLASS_PREFIX_SUCCESS)
+
+    this._initializeMessageCollections()
     this._initialDescriptedBy = this._element.getAttribute(ARIA_DESCRIBED_BY)
-    this._appended = null
+    this._appendedFeedback = null
+    EventHandler.on(this._element, EVENT_INPUT, () => {
+      this.clearAppended()
+    })
   }
 
   getElement() {
     return this._element
   }
 
   clearAppended() {
-    if (!this._appended) {
+    if (!this._appendedFeedback) {
       return
     }
 
-    this._appended.remove()
-    this._appended = null
+    this._appendedFeedback.remove()
+    this._appendedFeedback = null
     if (this._initialDescriptedBy) {
       this._element.setAttribute(ARIA_DESCRIBED_BY, this._initialDescriptedBy)
     } else {
@@ -81,70 +88,54 @@ class Field {
     return this._successMessages
   }
 
-  appendFirstErrorMsg() {
-    return this.appendFeedback(this.errorMessages().getFirst(), CLASS_ERROR)
-  }
-
-  appendFirstHelpMsg() {
-    return this.appendFeedback(this.helpMessages().getFirst(), CLASS_INFO)
-  }
-
-  appendFirstSuccessMsg() {
-    return this.appendFeedback(this.successMessages().getFirst(), CLASS_SUCCESS)
-  }
-
   _getConfig(config) {
     config = {
       ...Default,
       ...Manipulator.getDataAttributes(this._element),
       ...(typeof config === 'object' ? config : {})
     }
 
-    if (config.invalid) {
-      this.errorMessages().add(config.invalid)
-    }
-
-    if (config.valid) {
-      this.successMessages().add(config.valid)
-    }
-
     typeCheckConfig(NAME, config, DefaultType)
     return config
   }
 
-  appendFeedback(text, classAttr = '') {
+  _appendFeedback(htmlElement) {
     this.clearAppended()
-    if (!text) {
+    if (!htmlElement) {
       return
     }
 
-    const feedbackElement = this._makeFeedbackElement(text, classAttr)
+    const feedbackElement = htmlElement
 
-    this._appended = feedbackElement
+    this._appendedFeedback = feedbackElement
 
     this._element.parentNode.insertBefore(feedbackElement, this._element.nextSibling)
-
+    feedbackElement.id = this._getId()
     const describedBy = this._initialDescriptedBy ? `${this._initialDescriptedBy} ` : ''
     this._element.setAttribute(ARIA_DESCRIBED_BY, `${describedBy}${feedbackElement.id}`)
   }
 
-  _makeFeedbackElement(text, classAttr) {
-    const element = document.createElement('div')
-    element.innerHTML = this._setProperClassType(this._config.template)
-    const feedback = element.children[0]
-    feedback.classList.add(this._setProperClassType(classAttr))
-    feedback.id = this._getId()
-    feedback.innerHTML = text
-
-    return feedback
+  _getId() {
+    return `${this._config.name}-formTip`
   }
 
-  _setProperClassType(classPrefix) {
-    return classPrefix.replaceAll(TYPE_PLACEHOLDER, this._config.type)
+  _getNewMessagesCollection(classPrefix) {
+    const config = {
+      appendFunction: html => this._appendFeedback(html),
+      type: this._config.type,
+      classPrefix
+    }
+    return new Messages(config)
   }
 
-  _getId() {
-    return `${this._config.name}-formTip`
+  _initializeMessageCollections() {
+    if (this._config.invalid) {
+      this.errorMessages().add(this._config.invalid)
+    }
+
+    if (this._config.valid) {
+      this.successMessages().add(this._config.valid)
+    }
   }
 }
 

js/src/forms/form-validation.js

@@ -40,7 +40,6 @@ class FormValidation extends BaseComponent {
     this._config = this._getConfig(config)
 
     this._addEventListeners()
-    this._formElements = [...this._element.elements] // the DOM elements
     this._formFields = null // Our fields
   }
 
@@ -62,7 +61,7 @@ class FormValidation extends BaseComponent {
 
   appendErrors() {
     this.getFields().forEach(field => {
-      field.appendFirstErrorMsg()
+      field.errorMessages().appendFirst()
     })
   }
 
@@ -73,7 +72,7 @@ class FormValidation extends BaseComponent {
     })
   }
 
-  autoValidate() {
+  validate() {
     if (this._element.checkValidity()) {
       this.clear()
       return
@@ -82,15 +81,15 @@ class FormValidation extends BaseComponent {
     this.getFields().forEach(field => {
       const element = field.getElement()
       if (element.checkValidity()) {
-        field.appendFirstSuccessMsg()
+        field.successMessages().appendFirst()
         return
       }
 
       if (!field.errorMessages().has()) { // if hasn't custom message, try to put the default
         field.errorMessages().add(element.validationMessage)
       }
 
-      field.appendFirstErrorMsg()
+      field.errorMessages().appendFirst()
     })
 
     this._element.classList.add(CLASS_VALIDATED)
@@ -115,7 +114,7 @@ class FormValidation extends BaseComponent {
 
   _initializeFields() {
     const arrayFields = new Map()
-    this._formElements.forEach(element => {
+    Array.from(this._element.elements).forEach(element => {
       let { id } = element
       if (!id) {
         id = getUID(NAME)
@@ -134,13 +133,13 @@ class FormValidation extends BaseComponent {
 
 EventHandler.on(document, EVENT_SUBMIT, SELECTOR_DATA_TOGGLE, event => {
   const { target } = event
-  const data = FormValidation.getInstance(target) || new FormValidation(target)
+  const data = FormValidation.getOrCreateInstance(target)
   if (!target.checkValidity()) {
     event.preventDefault()
     event.stopPropagation()
   }
 
-  data.autoValidate()
+  data.validate()
 })
 
 EventHandler.on(window, EVENT_LOAD_DATA_API, () => {

js/src/forms/message.js

@@ -0,0 +1,68 @@
+import { DefaultAllowlist, sanitizeHtml } from '../util/sanitizer'
+import { typeCheckConfig } from '../util/index'
+
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.0.1): util/message.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+const TYPE_PLACEHOLDER = '{type}'
+
+const Default = {
+  appendFunction: null,
+  classPrefix: null,
+  template: `<div class="field-${TYPE_PLACEHOLDER}"></div>`,
+  text: null,
+  type: null
+}
+
+const DefaultType = {
+  appendFunction: 'function',
+  classPrefix: 'string',
+  template: 'string',
+  text: 'string',
+  type: 'string'
+}
+
+class Message {
+  constructor(config) {
+    this._config = this._getConfig(config)
+  }
+
+  getText() {
+    return this._config.message
+  }
+
+  getHtml() {
+    const element = document.createElement('div')
+    element.innerHTML = this._setProperClassType(this._config.template)
+    const feedback = element.children[0]
+    const className = `${this._config.classPrefix}-${TYPE_PLACEHOLDER}`
+    feedback.classList.add(this._setProperClassType(className))
+    feedback.innerHTML = this._config.text
+
+    return feedback
+  }
+
+  append() {
+    this._config.appendFunction(this.getHtml())
+  }
+
+  _setProperClassType(classPrefix) {
+    return classPrefix.replaceAll(TYPE_PLACEHOLDER, this._config.type)
+  }
+
+  _getConfig(config) {
+    config = {
+      ...Default,
+      ...(typeof config === 'object' ? config : {})
+    }
+    config.text = sanitizeHtml(config.text, DefaultAllowlist, null)
+    typeCheckConfig(Message, config, DefaultType)
+    return config
+  }
+}
+
+export default Message

js/src/forms/messages.js

@@ -1,19 +1,20 @@
-import { sanitizeHtml, DefaultAllowlist } from '../util/sanitizer'
-
 /**
  * --------------------------------------------------------------------------
  * Bootstrap (v5.0.1): util/messages.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
+import Message from './message'
 
 class Messages {
-  constructor() {
+  constructor(messageConfig) {
+    this._messageConfig = messageConfig
     this._messages = new Set()
   }
 
   add(message) {
-    this._messages.add(sanitizeHtml(message, DefaultAllowlist, null))
+    const config = { ...this._messageConfig, ...{ text: message } }
+    this._messages.add(new Message(config))
   }
 
   has() {
@@ -25,11 +26,22 @@ class Messages {
   }
 
   getAll() {
-    return [...this._messages]
+    return this._getAllMessagesAsArray().map(message => message.getText())
   }
 
   getFirst() {
-    return this.getAll()[0] || null
+    return this._getAllMessagesAsArray()[0] || null
+  }
+
+  appendFirst() {
+    const message = this.getFirst()
+    if (message) {
+      message.append()
+    }
+  }
+
+  _getAllMessagesAsArray() {
+    return [...this._messages]
   }
 }