UNPKG

foundation-sites

Version:

The most advanced responsive front-end framework in the world.

1,275 lines 78.2 kB
{ "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\">&lt;<span class=\"hljs-name\">form</span> <span class=\"hljs-attr\">data-abide</span> <span class=\"hljs-attr\">novalidate</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<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>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"fi-alert\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">i</span>&gt;</span> There are some errors in your form.<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"row\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"small-12 columns\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label</span>&gt;</span>Number Required\n <span class=\"hljs-tag\">&lt;<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>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"form-error\"</span>&gt;</span>\n Yo, you had better fill this out, it's required.\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">span</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">label</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<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>&gt;</span>Here's how you use this input field!<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"small-12 columns\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label</span>&gt;</span>Nothing Required!\n <span class=\"hljs-tag\">&lt;<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>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">label</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<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>&gt;</span>This input is ignored by Abide using `data-abide-ignore`<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"small-12 columns\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label</span>&gt;</span>Password Required\n <span class=\"hljs-tag\">&lt;<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> &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"form-error\"</span>&gt;</span>\n I'm required!\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">span</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">label</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<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>&gt;</span>Enter a password please.<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"small-12 columns\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label</span>&gt;</span>Re-enter Password\n <span class=\"hljs-tag\">&lt;<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>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"form-error\"</span>&gt;</span>\n Hey, passwords are supposed to match!\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">span</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">label</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<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>&gt;</span>This field is using the `data-equalto=\"password\"` attribute, causing it to match the password field above.<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"row\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"medium-6 columns\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label</span>&gt;</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\">&lt;<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>&gt;</span>\n