From: Nicolas Coden <nicolas@ncoden.fr>
Date: Fri, 13 Jan 2017 14:58:58 +0000 (+0100)
Subject: Add docs for Form Errors
X-Git-Tag: 6.3.1~34^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=78a866b08dde8ab9897d1bbed68f493600504150;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add docs for Form Errors

Add docs in Abide with:
- Explanation about the way Form Errors are found
- An example with `[data-form-error-for]
---

diff --git a/docs/pages/abide.md b/docs/pages/abide.md
index 3cf8bc5e8..ad9d10afd 100644
--- a/docs/pages/abide.md
+++ b/docs/pages/abide.md
@@ -115,6 +115,29 @@ These input types create a text field: `text`, `date`, `datetime`, `datetime-loc
   <textarea type="text" class="is-invalid-input"></textarea>
 </label>
 
+---
+
+### Form Errors
+
+Abide automatically detects Form Errors of an input by their class (`.form-error` by default, see the `formErrorSelector` option) when they are siblings of the input or inside the same parent.
+
+When the Form Errors cannot be placed next to its field, like in an Input Group, the relation can be declared with `[data-form-error-for]` attribute.
+
+```html_example
+<form data-abide novalidate>
+  <label>
+    Amount
+    <div class="input-group">
+      <span class="input-group-label">$</span>
+      <input class="input-group-field" id="exampleNumberInput" type="number" required pattern="number"/>
+    </div>
+    <span class="form-error" data-form-error-for="exampleNumberInput">Amount is required.</span>
+  </label>
+  <button class="button" type="submit" value="Submit">Submit</button>
+</form>
+```
+
+
 ## Initial State
 
 ```html