Add attribute to declare Form Error relation

Closes https://github.com/zurb/foundation-sites/issues/9600.

Add `[data-form-error-for=someId]` attribute to declare a relation
between a form error and the related field.

diff --git a/js/foundation.abide.js b/js/foundation.abide.js
index 688298ff183201235768060120a25148c421d35c..cd15eb78b067aa2601b4abfd59c9de2f2625a36e 100644 (file)
--- a/js/foundation.abide.js
+++ b/js/foundation.abide.js
@@ -110,9 +110,11 @@ class Abide {
   }
 
   /**
-   * Based on $el, get the first element with selector in this order:
-   * 1. The element's direct sibling('s).
-   * 3. The element's parent's children.
+   * Get:
+   * - Based on $el, the first element(s) corresponding to `formErrorSelector` in this order:
+   *   1. The element's direct sibling('s).
+   *   2. The element's parent's children.
+   * - Element(s) with the attribute `[data-form-error-for]` set with the element's id.
    *
    * This allows for multiple form errors per input, though if none are found, no form errors will be shown.
    *
@@ -120,12 +122,15 @@ class Abide {
    * @returns {Object} jQuery object with the selector.
    */
   findFormError($el) {
+    var id = $el[0].id;
     var $error = $el.siblings(this.options.formErrorSelector);
 
     if (!$error.length) {
       $error = $el.parent().find(this.options.formErrorSelector);
     }
 
+    $error = $error.add(this.$element.find(`[data-form-error-for="${id}"]`));
+
     return $error;
   }