From f9694d5902e92d88320ea981334824eb67c1942e Mon Sep 17 00:00:00 2001
From: Nicolas Coden <nicolas@ncoden.fr>
Date: Fri, 13 Jan 2017 15:56:31 +0100
Subject: [PATCH] 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.
---
 js/foundation.abide.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/js/foundation.abide.js b/js/foundation.abide.js
index 688298ff1..cd15eb78b 100644
--- 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;
   }
 
-- 
2.47.2