From: Nicolas Coden <nicolas@ncoden.fr>
Date: Fri, 13 Jan 2017 14:56:31 +0000 (+0100)
Subject: Add attribute to declare Form Error relation
X-Git-Tag: 6.3.1~34^2~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f9694d5902e92d88320ea981334824eb67c1942e;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 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;
   }