add docs & some changes

js/src/base-component.js

@@ -36,6 +36,10 @@ class BaseComponent extends Config {
   }
 
   // Public
+  getElement() {
+    return this._element
+  }
+
   dispose() {
     Data.remove(this._element, this.constructor.DATA_KEY)
     EventHandler.off(this._element, this.constructor.EVENT_KEY)

js/src/forms/form-field.js

@@ -20,15 +20,13 @@ const CLASS_FIELD_SUCCESS = 'is-valid'
 
 const ARIA_DESCRIBED_BY = 'aria-describedby'
 const Default = {
-  invalid: '', // invalid message to add
-  name: null,
-  valid: '', // valid message to add
+  invalid: '', // invalid message to append
+  valid: '', // valid message to append
   type: 'feedback' // or tooltip
 }
 
 const DefaultType = {
   invalid: 'string',
-  name: 'string',
   valid: 'string',
   type: 'string'
 }
@@ -70,10 +68,6 @@ class FormField extends BaseComponent {
     return MessageTypes
   }
 
-  getElement() {
-    return this._element
-  }
-
   clearAppended() {
     const appendedFeedback = SelectorEngine.findOne(`#${this._tipId}`, this._element.parentNode)
     if (!appendedFeedback) {
@@ -122,6 +116,10 @@ class FormField extends BaseComponent {
     this._element.setAttribute(ARIA_DESCRIBED_BY, describedBy)
     return true
   }
+
+  name() {
+    return this._element.name || this._element.id
+  }
 }
 
 export default FormField

js/src/forms/form.js

@@ -8,6 +8,7 @@ import BaseComponent from '../base-component'
 import EventHandler from '../dom/event-handler'
 import FormField from './form-field'
 import SelectorEngine from '../dom/selector-engine'
+import { execute } from '../util/index'
 
 const NAME = 'formValidation'
 const DATA_KEY = 'bs.formValidation'
@@ -17,7 +18,7 @@ const EVENT_SUBMIT = `submit${EVENT_KEY}`
 const EVENT_RESET = `reset${EVENT_KEY}`
 
 const CLASS_VALIDATED = 'was-validated'
-const SELECTOR_DATA_TOGGLE = 'form[data-bs-toggle="form-validation"]'
+const SELECTOR_DATA_TOGGLE = 'form[data-bs-toggle="form"]'
 
 const Default = {
   type: 'feedback', // or 'tooltip'
@@ -25,7 +26,8 @@ const Default = {
 }
 
 const DefaultType = {
-  type: 'string', validateCallback: '(function|null)'
+  type: 'string',
+  validateCallback: '(function|null)'
 }
 
 class Form extends BaseComponent {
@@ -86,10 +88,6 @@ class Form extends BaseComponent {
     return false
   }
 
-  getDataForSubmission() {
-    return new FormData(this._element)
-  }
-
   _appendErrorToField(field, givenMessage) {
     const element = field.getElement()
 
@@ -114,19 +112,17 @@ class Form extends BaseComponent {
     const fields = new Map()
     const formElements = Array.from(this._element.elements) // the DOM elements
     for (const element of formElements) {
-      const name = element.name || element.id
-
       const field = FormField.getOrCreateInstance(element, {
-        name, type: this._config.type
+        type: this._config.type
       })
-      fields.set(name, field)
+      fields.set(field.name(), field)
     }
 
     return fields
   }
 
   _fetchErrors() {
-    return typeof this._config.validateCallback === 'function' ? this._config.validateCallback(this.getDataForSubmission()) : {}
+    return execute(this._config.validateCallback, [this], {})
   }
 }