Use pull request #11035 from lirael/docs/abide-fix-custom-validator-foundation-initia...

dded67fdb docs: fix example for custom validator
3bfb07b07 docs: add infos in the Abide custom validator example

Co-Authored-By: Nicolas Coden <nicolas@ncoden.fr>
Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>

diff --git a/docs/pages/abide.md b/docs/pages/abide.md
index c22716d633f6f64cbd483a549361ecb6aea531cd..86428a7311946a0bccba3aace762e1389db08060 100644 (file)
--- a/docs/pages/abide.md
+++ b/docs/pages/abide.md
@@ -354,21 +354,23 @@ website: {
 * Add new patterns and validators before or after foundation is initialized
 
 ```javascript
-
-// Set paramaters
-Foundation.Abide.defaults.patterns['dashes_only'] = /^[0-9-]*$/;
-Foundation.Abide.defaults.validators['greater_than'] =
-
-// Init Foundation
-$(document).foundation();
-
-function($el,required,parent) {
-  // parameter 1 is jQuery selector
+function myCustomValidator(
+  $el,      /* jQuery element to validate */
+  required, /* is the element required according to the `[required]` attribute */
+  parent    /* parent of the jQuery element `$el` */
+) {
   if (!required) return true;
   var from = $('#'+$el.attr('data-greater-than')).val(),
       to = $el.val();
   return (parseInt(to) > parseInt(from));
 };
+
+// Set default options
+Foundation.Abide.defaults.patterns['dashes_only'] = /^[0-9-]*$/;
+Foundation.Abide.defaults.validators['greater_than'] = myCustomValidator;
+
+// Initialize Foundation
+$(document).foundation();
 ```
 ```html
 <input id="phone" type="text" pattern="dashes_only" required >