foundation-sites
Version:
The most advanced responsive front-end framework in the world.
1,275 lines • 78.2 kB
JSON
{
"title": "Abide",
"description": "Abide is an form validation library that extends the HTML5 validation API with custom validators.",
"sass": {
"variable": [
{
"description": "Sets if error styles should be added to inputs.\n",
"commentRange": {
"start": 9,
"end": 10
},
"context": {
"type": "variable",
"name": "abide-inputs",
"value": "true",
"scope": "default",
"line": {
"start": 11,
"end": 11
}
},
"type": "Boolean",
"group": [
"abide"
],
"access": "public",
"file": {
"path": "_error.scss",
"name": "_error.scss"
}
},
{
"description": "Sets if error styles should be added to labels.\n",
"commentRange": {
"start": 13,
"end": 14
},
"context": {
"type": "variable",
"name": "abide-labels",
"value": "true",
"scope": "default",
"line": {
"start": 15,
"end": 15
}
},
"type": "Boolean",
"group": [
"abide"
],
"access": "public",
"file": {
"path": "_error.scss",
"name": "_error.scss"
}
},
{
"description": "Background color to use for invalid text inputs.\n",
"commentRange": {
"start": 17,
"end": 18
},
"context": {
"type": "variable",
"name": "input-background-invalid",
"value": "map-get($foundation-palette, alert)",
"scope": "default",
"line": {
"start": 19,
"end": 19
}
},
"type": "Color",
"group": [
"abide"
],
"access": "public",
"file": {
"path": "_error.scss",
"name": "_error.scss"
}
},
{
"description": "Color to use for labels of invalid inputs.\n",
"commentRange": {
"start": 21,
"end": 22
},
"context": {
"type": "variable",
"name": "form-label-color-invalid",
"value": "map-get($foundation-palette, alert)",
"scope": "default",
"line": {
"start": 23,
"end": 23
}
},
"type": "Color",
"group": [
"abide"
],
"access": "public",
"file": {
"path": "_error.scss",
"name": "_error.scss"
}
},
{
"description": "Default font color for form error text.\n",
"commentRange": {
"start": 25,
"end": 26
},
"context": {
"type": "variable",
"name": "input-error-color",
"value": "map-get($foundation-palette, alert)",
"scope": "default",
"line": {
"start": 27,
"end": 27
}
},
"type": "Color",
"group": [
"abide"
],
"access": "public",
"file": {
"path": "_error.scss",
"name": "_error.scss"
},
"usedBy": [
{
"description": "Adds error styles to a form element, using the values in the settings file.\n",
"context": {
"type": "mixin",
"name": "form-error",
"code": "\n display: none;\n margin-top: $form-spacing * -0.5;\n margin-bottom: $form-spacing;\n font-size: $input-error-font-size;\n font-weight: $input-error-font-weight;\n color: $input-error-color;\n",
"line": {
"start": 52,
"end": 59
}
}
}
]
},
{
"description": "Default font size for form error text.\n",
"commentRange": {
"start": 29,
"end": 30
},
"context": {
"type": "variable",
"name": "input-error-font-size",
"value": "rem-calc(12)",
"scope": "default",
"line": {
"start": 31,
"end": 31
}
},
"type": "Number",
"group": [
"abide"
],
"access": "public",
"file": {
"path": "_error.scss",
"name": "_error.scss"
},
"usedBy": [
{
"description": "Adds error styles to a form element, using the values in the settings file.\n",
"context": {
"type": "mixin",
"name": "form-error",
"code": "\n display: none;\n margin-top: $form-spacing * -0.5;\n margin-bottom: $form-spacing;\n font-size: $input-error-font-size;\n font-weight: $input-error-font-weight;\n color: $input-error-color;\n",
"line": {
"start": 52,
"end": 59
}
}
}
]
},
{
"description": "Default font weight for form error text.\n",
"commentRange": {
"start": 33,
"end": 34
},
"context": {
"type": "variable",
"name": "input-error-font-weight",
"value": "$global-weight-bold",
"scope": "default",
"line": {
"start": 35,
"end": 35
}
},
"type": "Keyword",
"group": [
"abide"
],
"access": "public",
"file": {
"path": "_error.scss",
"name": "_error.scss"
},
"usedBy": [
{
"description": "Adds error styles to a form element, using the values in the settings file.\n",
"context": {
"type": "mixin",
"name": "form-error",
"code": "\n display: none;\n margin-top: $form-spacing * -0.5;\n margin-bottom: $form-spacing;\n font-size: $input-error-font-size;\n font-weight: $input-error-font-weight;\n color: $input-error-color;\n",
"line": {
"start": 52,
"end": 59
}
}
}
]
}
],
"mixin": [
{
"description": "Styles the background and border of an input field to have an error state.\n\n",
"commentRange": {
"start": 37,
"end": 40
},
"context": {
"type": "mixin",
"name": "form-input-error",
"code": "\n &:not(:focus) {\n background-color: rgba($background, $background-alpha);\n border-color: $background;\n }\n",
"line": {
"start": 41,
"end": 49
}
},
"parameter": [
{
"type": "Color",
"name": "background",
"default": "$alert-color",
"description": "Color to use for the background and border."
},
{
"type": "Number",
"name": "background-alpha",
"default": "0.1",
"description": "Transparency level of the background color."
}
],
"group": [
"abide"
],
"access": "public",
"require": [],
"file": {
"path": "_error.scss",
"name": "_error.scss"
}
},
{
"description": "Adds error styles to a form element, using the values in the settings file.\n",
"commentRange": {
"start": 51,
"end": 51
},
"context": {
"type": "mixin",
"name": "form-error",
"code": "\n display: none;\n margin-top: $form-spacing * -0.5;\n margin-bottom: $form-spacing;\n font-size: $input-error-font-size;\n font-weight: $input-error-font-weight;\n color: $input-error-color;\n",
"line": {
"start": 52,
"end": 59
}
},
"group": [
"abide"
],
"access": "public",
"require": [
{
"type": "variable",
"name": "input-error-font-size"
},
{
"type": "variable",
"name": "input-error-font-weight"
},
{
"type": "variable",
"name": "input-error-color"
}
],
"file": {
"path": "_error.scss",
"name": "_error.scss"
}
}
]
},
"js": {
"module": [
{
"comment": "/**\n * Abide module.\n * @module foundation.abide\n */",
"meta": {
"range": [
31,
83
],
"filename": "foundation.abide.js",
"lineno": 5,
"path": "/Users/geoff/Sites/fs/js",
"code": {}
},
"description": "Abide module.",
"kind": "module",
"name": "abide",
"memberof": "foundation",
"longname": "foundation.module:abide",
"scope": "static"
}
],
"class": [
{
"comment": "/**\n * Creates a new instance of Abide.\n * @class\n * @fires Abide#init\n * @param {Object} element - jQuery object to add the trigger to.\n * @param {Object} options - Overrides to the default plugin settings.\n */",
"meta": {
"range": [
327,
543
],
"filename": "foundation.abide.js",
"lineno": 18,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100000012",
"name": "Abide",
"type": "MethodDefinition",
"paramnames": [
"element",
"options"
]
},
"vars": {
"": null
}
},
"description": "Creates a new instance of Abide.",
"kind": "class",
"fires": [
"Abide#event:init"
],
"params": [
{
"type": {
"names": [
"Object"
]
},
"description": "jQuery object to add the trigger to.",
"name": "element"
},
{
"type": {
"names": [
"Object"
]
},
"description": "Overrides to the default plugin settings.",
"name": "options"
}
],
"name": "Abide",
"longname": "foundation.module:abide~Abide.Abide",
"memberof": "foundation.module:abide~Abide",
"scope": "static"
}
],
"function": [
{
"comment": "/**\n * Checks whether or not a form element has the required attribute and if it's checked or not\n * @param {Object} element - jQuery object to check for required attribute\n * @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty\n */",
"meta": {
"range": [
1857,
2364
],
"filename": "foundation.abide.js",
"lineno": 80,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100000192",
"name": "Abide#requiredCheck",
"type": "MethodDefinition",
"paramnames": [
"$el"
]
},
"vars": {
"": null
}
},
"description": "Checks whether or not a form element has the required attribute and if it's checked or not",
"params": [
{
"type": {
"names": [
"Object"
]
},
"description": "jQuery object to check for required attribute",
"name": "element"
}
],
"returns": [
{
"type": {
"names": [
"Boolean"
]
},
"description": "Boolean value depends on whether or not attribute is checked or empty"
}
],
"name": "requiredCheck",
"longname": "foundation.module:abide~Abide#requiredCheck",
"kind": "function",
"memberof": "foundation.module:abide~Abide",
"scope": "instance"
},
{
"comment": "/**\n * Based on $el, get the first element with selector in this order:\n * 1. The element's direct sibling('s).\n * 3. The element's parent's children.\n *\n * This allows for multiple form errors per input, though if none are found, no form errors will be shown.\n *\n * @param {Object} $el - jQuery object to use as reference to find the form error selector.\n * @returns {Object} jQuery object with the selector.\n */",
"meta": {
"range": [
2802,
3008
],
"filename": "foundation.abide.js",
"lineno": 115,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100000280",
"name": "Abide#findFormError",
"type": "MethodDefinition",
"paramnames": [
"$el"
]
},
"vars": {
"": null
}
},
"description": "Based on $el, get the first element with selector in this order:\n1. The element's direct sibling('s).\n3. The element's parent's children.\n\nThis allows for multiple form errors per input, though if none are found, no form errors will be shown.",
"params": [
{
"type": {
"names": [
"Object"
]
},
"description": "jQuery object to use as reference to find the form error selector.",
"name": "$el"
}
],
"returns": [
{
"type": {
"names": [
"Object"
]
},
"description": "jQuery object with the selector."
}
],
"name": "findFormError",
"longname": "foundation.module:abide~Abide#findFormError",
"kind": "function",
"memberof": "foundation.module:abide~Abide",
"scope": "instance"
},
{
"comment": "/**\n * Get the first element in this order:\n * 2. The <label> with the attribute `[for=\"someInputId\"]`\n * 3. The `.closest()` <label>\n *\n * @param {Object} $el - jQuery object to check for required attribute\n * @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty\n */",
"meta": {
"range": [
3332,
3523
],
"filename": "foundation.abide.js",
"lineno": 133,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100000320",
"name": "Abide#findLabel",
"type": "MethodDefinition",
"paramnames": [
"$el"
]
},
"vars": {
"": null
}
},
"description": "Get the first element in this order:\n2. The <label> with the attribute `[for=\"someInputId\"]`\n3. The `.closest()` <label>",
"params": [
{
"type": {
"names": [
"Object"
]
},
"description": "jQuery object to check for required attribute",
"name": "$el"
}
],
"returns": [
{
"type": {
"names": [
"Boolean"
]
},
"description": "Boolean value depends on whether or not attribute is checked or empty"
}
],
"name": "findLabel",
"longname": "foundation.module:abide~Abide#findLabel",
"kind": "function",
"memberof": "foundation.module:abide~Abide",
"scope": "instance"
},
{
"comment": "/**\n * Adds the CSS error class as specified by the Abide settings to the label, input, and the form\n * @param {Object} $el - jQuery object to add the class to\n */",
"meta": {
"range": [
3699,
4060
],
"filename": "foundation.abide.js",
"lineno": 148,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100000360",
"name": "Abide#addErrorClasses",
"type": "MethodDefinition",
"paramnames": [
"$el"
]
},
"vars": {
"": null
}
},
"description": "Adds the CSS error class as specified by the Abide settings to the label, input, and the form",
"params": [
{
"type": {
"names": [
"Object"
]
},
"description": "jQuery object to add the class to",
"name": "$el"
}
],
"name": "addErrorClasses",
"longname": "foundation.module:abide~Abide#addErrorClasses",
"kind": "function",
"memberof": "foundation.module:abide~Abide",
"scope": "instance"
},
{
"comment": "/**\n * Removes CSS error class as specified by the Abide settings from the label, input, and the form\n * @param {Object} $el - jQuery object to remove the class from\n */",
"meta": {
"range": [
4242,
4617
],
"filename": "foundation.abide.js",
"lineno": 167,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100000426",
"name": "Abide#removeErrorClasses",
"type": "MethodDefinition",
"paramnames": [
"$el"
]
},
"vars": {
"": null
}
},
"description": "Removes CSS error class as specified by the Abide settings from the label, input, and the form",
"params": [
{
"type": {
"names": [
"Object"
]
},
"description": "jQuery object to remove the class from",
"name": "$el"
}
],
"name": "removeErrorClasses",
"longname": "foundation.module:abide~Abide#removeErrorClasses",
"kind": "function",
"memberof": "foundation.module:abide~Abide",
"scope": "instance"
},
{
"comment": "/**\n * Goes through a form to find inputs and proceeds to validate them in ways specific to their type\n * @fires Abide#invalid\n * @fires Abide#valid\n * @param {Object} element - jQuery object to validate, should be an HTML input\n * @returns {Boolean} goodToGo - If the input is valid or not.\n */",
"meta": {
"range": [
4931,
6263
],
"filename": "foundation.abide.js",
"lineno": 189,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100000491",
"name": "Abide#validateInput",
"type": "MethodDefinition",
"paramnames": [
"$el"
]
},
"vars": {
"": null
}
},
"description": "Goes through a form to find inputs and proceeds to validate them in ways specific to their type",
"fires": [
"Abide#event:invalid",
"Abide#event:valid"
],
"params": [
{
"type": {
"names": [
"Object"
]
},
"description": "jQuery object to validate, should be an HTML input",
"name": "element"
}
],
"returns": [
{
"type": {
"names": [
"Boolean"
]
},
"description": "goodToGo - If the input is valid or not."
}
],
"name": "validateInput",
"longname": "foundation.module:abide~Abide#validateInput",
"kind": "function",
"memberof": "foundation.module:abide~Abide",
"scope": "instance"
},
{
"comment": "/**\n * Goes through a form and if there are any invalid inputs, it will display the form error element\n * @returns {Boolean} noError - true if no errors were detected...\n * @fires Abide#formvalid\n * @fires Abide#forminvalid\n */",
"meta": {
"range": [
6507,
7166
],
"filename": "foundation.abide.js",
"lineno": 245,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100000647",
"name": "Abide#validateForm",
"type": "MethodDefinition",
"paramnames": []
},
"vars": {
"": null
}
},
"description": "Goes through a form and if there are any invalid inputs, it will display the form error element",
"returns": [
{
"type": {
"names": [
"Boolean"
]
},
"description": "noError - true if no errors were detected..."
}
],
"fires": [
"Abide#event:formvalid",
"Abide#event:forminvalid"
],
"name": "validateForm",
"longname": "foundation.module:abide~Abide#validateForm",
"kind": "function",
"memberof": "foundation.module:abide~Abide",
"scope": "instance",
"params": []
},
{
"comment": "/**\n * Determines whether or a not a text input is valid based on the pattern specified in the attribute. If no matching pattern is found, returns true.\n * @param {Object} $el - jQuery object to validate, should be a text input HTML element\n * @param {String} pattern - string value of one of the RegEx patterns in Abide.options.patterns\n * @returns {Boolean} Boolean value depends on whether or not the input value matches the pattern specified\n */",
"meta": {
"range": [
7632,
8222
],
"filename": "foundation.abide.js",
"lineno": 274,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100000726",
"name": "Abide#validateText",
"type": "MethodDefinition",
"paramnames": [
"$el",
"pattern"
]
},
"vars": {
"": null
}
},
"description": "Determines whether or a not a text input is valid based on the pattern specified in the attribute. If no matching pattern is found, returns true.",
"params": [
{
"type": {
"names": [
"Object"
]
},
"description": "jQuery object to validate, should be a text input HTML element",
"name": "$el"
},
{
"type": {
"names": [
"String"
]
},
"description": "string value of one of the RegEx patterns in Abide.options.patterns",
"name": "pattern"
}
],
"returns": [
{
"type": {
"names": [
"Boolean"
]
},
"description": "Boolean value depends on whether or not the input value matches the pattern specified"
}
],
"name": "validateText",
"longname": "foundation.module:abide~Abide#validateText",
"kind": "function",
"memberof": "foundation.module:abide~Abide",
"scope": "instance"
},
{
"comment": "/**\n * Determines whether or a not a radio input is valid based on whether or not it is required and selected\n * @param {String} groupName - A string that specifies the name of a radio button group\n * @returns {Boolean} Boolean value depends on whether or not at least one radio input has been selected (if it's required)\n */",
"meta": {
"range": [
8562,
8930
],
"filename": "foundation.abide.js",
"lineno": 293,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100000800",
"name": "Abide#validateRadio",
"type": "MethodDefinition",
"paramnames": [
"groupName"
]
},
"vars": {
"": null
}
},
"description": "Determines whether or a not a radio input is valid based on whether or not it is required and selected",
"params": [
{
"type": {
"names": [
"String"
]
},
"description": "A string that specifies the name of a radio button group",
"name": "groupName"
}
],
"returns": [
{
"type": {
"names": [
"Boolean"
]
},
"description": "Boolean value depends on whether or not at least one radio input has been selected (if it's required)"
}
],
"name": "validateRadio",
"longname": "foundation.module:abide~Abide#validateRadio",
"kind": "function",
"memberof": "foundation.module:abide~Abide",
"scope": "instance"
},
{
"comment": "/**\n * Determines if a selected input passes a custom validation function. Multiple validations can be used, if passed to the element with `data-validator=\"foo bar baz\"` in a space separated listed.\n * @param {Object} $el - jQuery input element.\n * @param {String} validators - a string of function names matching functions in the Abide.options.validators object.\n * @param {Boolean} required - self explanatory?\n * @returns {Boolean} - true if validations passed.\n */",
"meta": {
"range": [
9417,
9675
],
"filename": "foundation.abide.js",
"lineno": 315,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100000867",
"name": "Abide#matchValidation",
"type": "MethodDefinition",
"paramnames": [
"$el",
"validators",
"required"
]
},
"vars": {
"": null
}
},
"description": "Determines if a selected input passes a custom validation function. Multiple validations can be used, if passed to the element with `data-validator=\"foo bar baz\"` in a space separated listed.",
"params": [
{
"type": {
"names": [
"Object"
]
},
"description": "jQuery input element.",
"name": "$el"
},
{
"type": {
"names": [
"String"
]
},
"description": "a string of function names matching functions in the Abide.options.validators object.",
"name": "validators"
},
{
"type": {
"names": [
"Boolean"
]
},
"description": "self explanatory?",
"name": "required"
}
],
"returns": [
{
"type": {
"names": [
"Boolean"
]
},
"description": "- true if validations passed."
}
],
"name": "matchValidation",
"longname": "foundation.module:abide~Abide#matchValidation",
"kind": "function",
"memberof": "foundation.module:abide~Abide",
"scope": "instance"
},
{
"comment": "/**\n * Resets form inputs and styles\n * @fires Abide#formreset\n */",
"meta": {
"range": [
9754,
10423
],
"filename": "foundation.abide.js",
"lineno": 328,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100000919",
"name": "Abide#resetForm",
"type": "MethodDefinition",
"paramnames": []
},
"vars": {
"": null
}
},
"description": "Resets form inputs and styles",
"fires": [
"Abide#event:formreset"
],
"name": "resetForm",
"longname": "foundation.module:abide~Abide#resetForm",
"kind": "function",
"memberof": "foundation.module:abide~Abide",
"scope": "instance",
"params": []
},
{
"comment": "/**\n * Destroys an instance of Abide.\n * Removes error styles and classes from elements, without resetting their values.\n */",
"meta": {
"range": [
10560,
10860
],
"filename": "foundation.abide.js",
"lineno": 348,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100001029",
"name": "Abide#destroy",
"type": "MethodDefinition",
"paramnames": []
},
"vars": {
"": null
}
},
"description": "Destroys an instance of Abide.\nRemoves error styles and classes from elements, without resetting their values.",
"name": "destroy",
"longname": "foundation.module:abide~Abide#destroy",
"kind": "function",
"memberof": "foundation.module:abide~Abide",
"scope": "instance",
"params": []
}
],
"event": [
{
"comment": "/**\n * Fires when the input is done checking for validation. Event trigger is either `valid.zf.abide` or `invalid.zf.abide`\n * Trigger includes the DOM element of the input.\n * @event Abide#valid\n * @event Abide#invalid\n */",
"meta": {
"range": [
5961,
6204
],
"filename": "foundation.abide.js",
"lineno": 228,
"path": "/Users/geoff/Sites/fs/js",
"code": {}
},
"description": "Fires when the input is done checking for validation. Event trigger is either `valid.zf.abide` or `invalid.zf.abide`\nTrigger includes the DOM element of the input.",
"kind": "event",
"name": "invalid",
"memberof": "Abide",
"longname": "Abide#event:invalid",
"scope": "instance"
},
{
"comment": "/**\n * Fires when the form is finished validating. Event trigger is either `formvalid.zf.abide` or `forminvalid.zf.abide`.\n * Trigger includes the element of the form.\n * @event Abide#formvalid\n * @event Abide#forminvalid\n */",
"meta": {
"range": [
6797,
7042
],
"filename": "foundation.abide.js",
"lineno": 257,
"path": "/Users/geoff/Sites/fs/js",
"code": {}
},
"description": "Fires when the form is finished validating. Event trigger is either `formvalid.zf.abide` or `forminvalid.zf.abide`.\nTrigger includes the element of the form.",
"kind": "event",
"name": "forminvalid",
"memberof": "Abide",
"longname": "Abide#event:forminvalid",
"scope": "instance"
},
{
"comment": "/**\n * Fires when the form has been reset.\n * @event Abide#formreset\n */",
"meta": {
"range": [
10285,
10369
],
"filename": "foundation.abide.js",
"lineno": 337,
"path": "/Users/geoff/Sites/fs/js",
"code": {}
},
"description": "Fires when the form has been reset.",
"kind": "event",
"name": "formreset",
"memberof": "Abide",
"longname": "Abide#event:formreset",
"scope": "instance"
}
],
"member": [
{
"comment": "/**\n * The default event to validate inputs. Checkboxes and radios validate immediately.\n * Remove or change this value for manual validation.\n * @option\n * @example 'fieldChange'\n */",
"meta": {
"range": [
11120,
11145
],
"filename": "foundation.abide.js",
"lineno": 375,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100001087",
"name": "validateOn",
"type": "Literal",
"value": "fieldChange"
}
},
"description": "The default event to validate inputs. Checkboxes and radios validate immediately.\nRemove or change this value for manual validation.",
"tags": [
{
"originalTitle": "option",
"title": "option",
"text": ""
}
],
"examples": [
"'fieldChange'"
],
"name": "validateOn",
"longname": "foundation.module:abide~Abide.defaults.validateOn",
"kind": "member",
"memberof": "foundation.module:abide~Abide.defaults",
"scope": "static"
},
{
"comment": "/**\n * Class to be applied to input labels on failed validation.\n * @option\n * @example 'is-invalid-label'\n */",
"meta": {
"range": [
11271,
11306
],
"filename": "foundation.abide.js",
"lineno": 382,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100001089",
"name": "labelErrorClass",
"type": "Literal",
"value": "is-invalid-label"
}
},
"description": "Class to be applied to input labels on failed validation.",
"tags": [
{
"originalTitle": "option",
"title": "option",
"text": ""
}
],
"examples": [
"'is-invalid-label'"
],
"name": "labelErrorClass",
"longname": "foundation.module:abide~Abide.defaults.labelErrorClass",
"kind": "member",
"memberof": "foundation.module:abide~Abide.defaults",
"scope": "static"
},
{
"comment": "/**\n * Class to be applied to inputs on failed validation.\n * @option\n * @example 'is-invalid-input'\n */",
"meta": {
"range": [
11426,
11461
],
"filename": "foundation.abide.js",
"lineno": 389,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100001091",
"name": "inputErrorClass",
"type": "Literal",
"value": "is-invalid-input"
}
},
"description": "Class to be applied to inputs on failed validation.",
"tags": [
{
"originalTitle": "option",
"title": "option",
"text": ""
}
],
"examples": [
"'is-invalid-input'"
],
"name": "inputErrorClass",
"longname": "foundation.module:abide~Abide.defaults.inputErrorClass",
"kind": "member",
"memberof": "foundation.module:abide~Abide.defaults",
"scope": "static"
},
{
"comment": "/**\n * Class selector to use to target Form Errors for show/hide.\n * @option\n * @example '.form-error'\n */",
"meta": {
"range": [
11583,
11615
],
"filename": "foundation.abide.js",
"lineno": 396,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100001093",
"name": "formErrorSelector",
"type": "Literal",
"value": ".form-error"
}
},
"description": "Class selector to use to target Form Errors for show/hide.",
"tags": [
{
"originalTitle": "option",
"title": "option",
"text": ""
}
],
"examples": [
"'.form-error'"
],
"name": "formErrorSelector",
"longname": "foundation.module:abide~Abide.defaults.formErrorSelector",
"kind": "member",
"memberof": "foundation.module:abide~Abide.defaults",
"scope": "static"
},
{
"comment": "/**\n * Class added to Form Errors on failed validation.\n * @option\n * @example 'is-visible'\n */",
"meta": {
"range": [
11726,
11754
],
"filename": "foundation.abide.js",
"lineno": 403,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100001095",
"name": "formErrorClass",
"type": "Literal",
"value": "is-visible"
}
},
"description": "Class added to Form Errors on failed validation.",
"tags": [
{
"originalTitle": "option",
"title": "option",
"text": ""
}
],
"examples": [
"'is-visible'"
],
"name": "formErrorClass",
"longname": "foundation.module:abide~Abide.defaults.formErrorClass",
"kind": "member",
"memberof": "foundation.module:abide~Abide.defaults",
"scope": "static"
},
{
"comment": "/**\n * Set to true to validate text inputs on any value change.\n * @option\n * @example false\n */",
"meta": {
"range": [
11866,
11885
],
"filename": "foundation.abide.js",
"lineno": 410,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100001097",
"name": "liveValidate",
"type": "Literal",
"value": false
}
},
"description": "Set to true to validate text inputs on any value change.",
"tags": [
{
"originalTitle": "option",
"title": "option",
"text": ""
}
],
"examples": [
"false"
],
"name": "liveValidate",
"longname": "foundation.module:abide~Abide.defaults.liveValidate",
"kind": "member",
"memberof": "foundation.module:abide~Abide.defaults",
"scope": "static"
},
{
"comment": "/**\n * Optional validation functions to be used. `equalTo` being the only default included function.\n * Functions should return only a boolean if the input is valid or not. Functions are given the following arguments:\n * el : The jQuery element to validate.\n * required : Boolean value of the required attribute be present or not.\n * parent : The direct parent of the input.\n * @option\n */",
"meta": {
"range": [
14980,
15116
],
"filename": "foundation.abide.js",
"lineno": 452,
"path": "/Users/geoff/Sites/fs/js",
"code": {
"id": "astnode100001133",
"name": "validators",
"type": "ObjectExpression",
"value": "{\"equalTo\":\"\"}"
}
},
"description": "Optional validation functions to be used. `equalTo` being the only default included function.\nFunctions should return only a boolean if the input is valid or not. Functions are given the following arguments:\nel : The jQuery element to validate.\nrequired : Boolean value of the required attribute be present or not.\nparent : The direct parent of the input.",
"tags": [
{
"originalTitle": "option",
"title": "option",
"text": ""
}
],
"name": "validators",
"longname": "foundation.module:abide~Abide.defaults.validators",
"kind": "member",
"memberof": "foundation.module:abide~Abide.defaults",
"scope": "static"
}
],
"package": [
{
"kind": "package",
"longname": "package:undefined",
"files": [
"/Users/geoff/Sites/fs/js/foundation.abide.js"
]
}
]
},
"tags": [
"forms",
"validation"
],
"__fm": {
"tags": [
"forms",
"validation"
],
"js": "js/foundation.abide.js",
"sass": "scss/forms/_error.scss",
"description": "Abide is an form validation library that extends the HTML5 validation API with custom validators.",
"title": "Abide"
},
"docs": "<h3 id=\"abide-demo\" class=\"docs-heading\">Abide Demo<a class=\"docs-heading-icon\" href=\"#abide-demo\"></a></h3><p>These input types create a text field: <code>text</code>, <code>date</code>, <code>datetime</code>, <code>datetime-local</code>, <code>email</code>, <code>month</code>, <code>number</code>, <code>password</code>, <code>search</code>, <code>tel</code>, <code>time</code>, <code>url</code>, and <code>week</code>.</p>\n<div class=\"docs-code\" data-docs-code><pre><code class=\"html\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">form</span> <span class=\"hljs-attr\">data-abide</span> <span class=\"hljs-attr\">novalidate</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">data-abide-error</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"alert callout\"</span> <span class=\"hljs-attr\">style</span>=<span class=\"hljs-string\">\"display: none;\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">p</span>></span><span class=\"hljs-tag\"><<span class=\"hljs-name\">i</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"fi-alert\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">i</span>></span> There are some errors in your form.<span class=\"hljs-tag\"></<span class=\"hljs-name\">p</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"row\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"small-12 columns\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">label</span>></span>Number Required\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">input</span> <span class=\"hljs-attr\">type</span>=<span class=\"hljs-string\">\"text\"</span> <span class=\"hljs-attr\">placeholder</span>=<span class=\"hljs-string\">\"1234\"</span> <span class=\"hljs-attr\">aria-describedby</span>=<span class=\"hljs-string\">\"exampleHelpText\"</span> <span class=\"hljs-attr\">required</span> <span class=\"hljs-attr\">pattern</span>=<span class=\"hljs-string\">\"number\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">span</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"form-error\"</span>></span>\n Yo, you had better fill this out, it's required.\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">span</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">label</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">p</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"help-text\"</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"exampleHelpText\"</span>></span>Here's how you use this input field!<span class=\"hljs-tag\"></<span class=\"hljs-name\">p</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"small-12 columns\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">label</span>></span>Nothing Required!\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">input</span> <span class=\"hljs-attr\">type</span>=<span class=\"hljs-string\">\"text\"</span> <span class=\"hljs-attr\">placeholder</span>=<span class=\"hljs-string\">\"Use me, or don't\"</span> <span class=\"hljs-attr\">aria-describedby</span>=<span class=\"hljs-string\">\"exampleHelpTex\"</span> <span class=\"hljs-attr\">data-abide-ignore</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">label</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">p</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"help-text\"</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"exampleHelpTex\"</span>></span>This input is ignored by Abide using `data-abide-ignore`<span class=\"hljs-tag\"></<span class=\"hljs-name\">p</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"small-12 columns\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">label</span>></span>Password Required\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">input</span> <span class=\"hljs-attr\">type</span>=<span class=\"hljs-string\">\"password\"</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"password\"</span> <span class=\"hljs-attr\">placeholder</span>=<span class=\"hljs-string\">\"yeti4preZ\"</span> <span class=\"hljs-attr\">aria-describedby</span>=<span class=\"hljs-string\">\"exampleHelpText\"</span> <span class=\"hljs-attr\">required</span> ></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">span</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"form-error\"</span>></span>\n I'm required!\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">span</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">label</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">p</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"help-text\"</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"exampleHelpText\"</span>></span>Enter a password please.<span class=\"hljs-tag\"></<span class=\"hljs-name\">p</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"small-12 columns\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">label</span>></span>Re-enter Password\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">input</span> <span class=\"hljs-attr\">type</span>=<span class=\"hljs-string\">\"password\"</span> <span class=\"hljs-attr\">placeholder</span>=<span class=\"hljs-string\">\"yeti4preZ\"</span> <span class=\"hljs-attr\">aria-describedby</span>=<span class=\"hljs-string\">\"exampleHelpText2\"</span> <span class=\"hljs-attr\">required</span> <span class=\"hljs-attr\">pattern</span>=<span class=\"hljs-string\">\"alpha_numeric\"</span> <span class=\"hljs-attr\">data-equalto</span>=<span class=\"hljs-string\">\"password\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">span</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"form-error\"</span>></span>\n Hey, passwords are supposed to match!\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">span</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">label</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">p</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"help-text\"</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"exampleHelpText2\"</span>></span>This field is using the `data-equalto=\"password\"` attribute, causing it to match the password field above.<span class=\"hljs-tag\"></<span class=\"hljs-name\">p</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"row\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"medium-6 columns\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">label</span>></span>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">input</span> <span class=\"hljs-attr\">type</span>=<span class=\"hljs-string\">\"text\"</span> <span class=\"hljs-attr\">placeholder</span>=<span class=\"hljs-string\">\"http://foundation.zurb.com\"</span> <span class=\"hljs-attr\">pattern</span>=<span class=\"hljs-string\">\"url\"</span>></span>\n