{"id":13404200,"url":"https://github.com/elclanrs/jq-idealforms","last_synced_at":"2026-02-19T02:33:47.251Z","repository":{"id":10992316,"uuid":"13313409","full_name":"elclanrs/jq-idealforms","owner":"elclanrs","description":"The ultimate framework for building and validating responsive HTML5 forms.","archived":false,"fork":false,"pushed_at":"2018-11-01T12:28:14.000Z","size":1403,"stargazers_count":720,"open_issues_count":27,"forks_count":123,"subscribers_count":52,"default_branch":"master","last_synced_at":"2026-01-23T09:45:43.735Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elclanrs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-04T00:42:13.000Z","updated_at":"2026-01-14T16:49:53.000Z","dependencies_parsed_at":"2022-08-31T00:01:46.971Z","dependency_job_id":null,"html_url":"https://github.com/elclanrs/jq-idealforms","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/elclanrs/jq-idealforms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elclanrs%2Fjq-idealforms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elclanrs%2Fjq-idealforms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elclanrs%2Fjq-idealforms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elclanrs%2Fjq-idealforms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elclanrs","download_url":"https://codeload.github.com/elclanrs/jq-idealforms/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elclanrs%2Fjq-idealforms/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29601098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T00:59:38.239Z","status":"online","status_checked_at":"2026-02-19T02:00:07.702Z","response_time":117,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:01:40.463Z","updated_at":"2026-02-19T02:33:47.215Z","avatar_url":"https://github.com/elclanrs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Animation"],"sub_categories":["Forms"],"readme":"![Ideal Forms logo](http://i.imgur.com/wg9htKk.png)\n\nThe best forms just got better! Ideal Forms 3 is smaller, faster, and more extensible.\n\n**License:** GPL or MIT  \n**Support:** IE9+ and all modern browsers  \n**Website:** http://bit.ly/GFrp55 (not always in sync)  \n**Demo only:** http://bit.ly/1ahZalu\n\n### Features\n- On the spot validation\n- Fully adaptive (adapts to the container, no css media queries needed)\n- Keyboard support\n- Custom checkboxes, radios and file inputs\n- Custom seamless jQuery UI datepicker\n- Support for third party extensions\n- Localization\n\n### Major changes since version 2\n\nIdeal Forms 3 is **not** compatible with version 2. You can still find Ideal Forms 2 under [jq-idealforms-old](https://github.com/elclanrs/jq-idealforms-old), but support has been dropped. Here's what's new in version 3:\n\n- New architecture, more modularity\n- Custom markup\n- Extensions\n- Improved custom checkbox, radio and file inputs\n- Improved built-in theme\n- Switch to Stylus\n- Drop custom select menu, but check out [jquery.idealselect](https://github.com/elclanrs/jquery.idealselect)\n- Drop support for IE8\n\n### TODO\n\n- Image Preview Field\n\n## Table of Contents\n\n- [Setup](#setup)\n- [Options](#options)\n- [Markup](#markup)\n    - [Markup with Rules](#markup-with-rules)\n    - [Custom Markup](#custom-markup)\n- [Adding Rules](#adding-rules)\n    - [Custom Errors](#custom-errors)\n- [Built-in Rules](#built-in-rules)\n- [Methods](#methods)\n- [Built-in Extensions](#built-in-extensions)\n    - [Dynamic Fields](#extension-dynamic-fields)\n    - [Steps](#extension-steps)\n    - [Custom Inputs](#extension-custom-inputs)\n    - [Ajax](#extension-ajax)\n    - [Datepicker](#extension-datepicker)\n    - [Adaptive](#extension-adaptive)\n- [Custom Rules](#custom-rules)\n- [Custom Extensions](#custom-extensions)\n- [Localization](#localization)\n- [Themes](#themes)\n- [FAQ](#faq)\n- [Build \u0026 Share](#build--share)\n- [Update History](#update-history)\n\n## Setup\n\n- Load latest [jQuery](http://code.jquery.com/jquery-2.0.3.min.js) library\n- Load `css/jquery.idealforms.css` stylesheet\n- Load `js/out/jquery.idealforms.min.js` plugin\n- To localize Ideal Forms load the corresponding file from `js/i18n`. See [Localization](#localization).\n- Place images in a folder and make sure the [path is correct](#why-the-icons-dont-show-up)\n- For better IE support, replace the opening `html` tag with:\n\n```html\n\u003c!--[if IE 9]\u003e \u003chtml class=\"ie9\" lang=\"en\"\u003e \u003c![endif]--\u003e\n\u003c!--[if (gt IE 9)|!(IE)]\u003e\u003c!--\u003e \u003chtml lang=\"en\"\u003e \u003c!--\u003c![endif]--\u003e\n```\n\n- Call Ideal Forms on your form:\n\n```javascript\n$('form').idealforms({ options });\n```\n\n[![TOC](http://i.imgur.com/RDbarNr.png)](#table-of-contents)\n\n## Options\n\n```javascript\ndefaults = {\n  field: '.field',\n  error: '.error',\n  iconHtml: '\u003ci/\u003e',\n  iconClass: 'icon',\n  invalidClass: 'invalid',\n  validClass: 'valid',\n  silentLoad: true,\n  onValidate: $.noop,\n  onSubmit: $.noop,\n  rules: {},\n  errors: {}\n}\n```\n\n### field\n\nThe field container for [custom markup](#custom-markup).\n\n### error\n\nThe error container for custom markup.\n\n### iconHtml\n\nThe element to use as icon. Set to `false` to disable icons.\n\n### iconClass\n\nThe class for the icon element.\n\n### invalidClass\n\nThe class that will be added to invalid fields.\n\n### validClass\n\nThe class that will be added to valid fields.\n\n### silentLoad\n\nInitialize the form silently, otherwise focus the first invalid input.\n\n### onValidate(input, rule, valid)\n\nCallback that runs after an input attempts to validate.\n\n- **input:** The input being validated\n- **rule:** The rule that the input is validating.\n- **valid:** Boolean. Did it validate?\n\n### onSubmit(invalid, event)\n\nCallback that runs when the form is submitted.\n\n- **invalid:** The number of invalid fields if any.\n- **event:** The submit event.\n\nExample:\n\n```javascript\n$('form').idealforms({\n  onSubmit: function(invalid, e) {\n    e.preventDefault();\n    \n    if (invalid) {\n      alert(invalid +' fields!');\n    } else {\n      $.post('save.php', this.$form.serialize(), function(response) {  \n        // do something with response\n      }, 'json');\n    }    \n  }\n});\n```\n\n### rules\n\nField rules. See [Adding Rules](#adding-rules).\n\n### errors\n\nUser defined errors for added rules. See [Custom Errors](#custom-errors).\n\n[![TOC](http://i.imgur.com/RDbarNr.png)](#table-of-contents)\n\n## Markup\n\nYou can get started quickly using Ideal Forms' default markup: \n\n```html\n\u003cform class=\"idealforms\" novalidate autocomplete=\"off\" action=\"/\" method=\"post\"\u003e\n\n  \u003c!-- Text --\u003e\n  \u003cdiv class=\"field\"\u003e\n    \u003clabel class=\"main\"\u003eUsername:\u003c/label\u003e\n    \u003cinput name=\"username\" type=\"text\"\u003e\n    \u003cspan class=\"error\"\u003e\u003c/span\u003e\n  \u003c/div\u003e\n\n  \u003c!-- File --\u003e\n  \u003cdiv class=\"field\"\u003e\n    \u003clabel class=\"main\"\u003ePicture:\u003c/label\u003e\n    \u003cinput id=\"picture\" name=\"picture\" type=\"file\" multiple\u003e\n    \u003cspan class=\"error\"\u003e\u003c/span\u003e\n  \u003c/div\u003e\n\n  \u003c!-- Radio --\u003e\n  \u003cdiv class=\"field\"\u003e\n    \u003clabel class=\"main\"\u003eSex:\u003c/label\u003e\n    \u003cp class=\"group\"\u003e\n      \u003clabel\u003e\u003cinput name=\"sex\" type=\"radio\" value=\"male\"\u003eMale\u003c/label\u003e\n      \u003clabel\u003e\u003cinput name=\"sex\" type=\"radio\" value=\"female\"\u003eFemale\u003c/label\u003e\n    \u003c/p\u003e\n    \u003cspan class=\"error\"\u003e\u003c/span\u003e\n  \u003c/div\u003e\n\n  \u003c!-- Checkbox --\u003e\n  \u003cdiv class=\"field\"\u003e\n    \u003clabel class=\"main\"\u003eHobbies:\u003c/label\u003e\n    \u003cp class=\"group\"\u003e\n      \u003clabel\u003e\u003cinput name=\"hobbies[]\" type=\"checkbox\" value=\"football\"\u003eFootball\u003c/label\u003e\n      \u003clabel\u003e\u003cinput name=\"hobbies[]\" type=\"checkbox\" value=\"basketball\"\u003eBasketball\u003c/label\u003e\n      \u003clabel\u003e\u003cinput name=\"hobbies[]\" type=\"checkbox\" value=\"dancing\"\u003eDancing\u003c/label\u003e\n    \u003c/p\u003e\n    \u003cspan class=\"error\"\u003e\u003c/span\u003e\n  \u003c/div\u003e\n\n  \u003c!-- Select --\u003e\n  \u003cdiv class=\"field\"\u003e\n    \u003clabel class=\"main\"\u003eOptions:\u003c/label\u003e\n    \u003cselect name=\"options\"\u003e\n      \u003coption value=\"default\"\u003e\u0026ndash; Select an option \u0026ndash;\u003c/option\u003e\n      \u003coption value=\"1\"\u003eOne\u003c/option\u003e\n      \u003coption value=\"2\"\u003eTwo\u003c/option\u003e\n    \u003c/select\u003e\n    \u003cspan class=\"error\"\u003e\u003c/span\u003e\n  \u003c/div\u003e\n\n  \u003c!-- Textarea --\u003e\n  \u003cdiv class=\"field\"\u003e\n    \u003clabel class=\"main\"\u003eComments:\u003c/label\u003e\n    \u003ctextarea name=\"comments\" cols=\"30\" rows=\"10\"\u003e\u003c/textarea\u003e\n    \u003cspan class=\"error\"\u003e\u003c/span\u003e\n  \u003c/div\u003e\n  \n  \u003c!-- Button --\u003e\n  \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n  \n\u003c/form\u003e\n```\n\n### Markup with Rules\n\nYou can build simple forms by adding the rules to the markup, using the `data-idealforms-rules` attribute:\n\n```html\n\u003cform class=\"idealforms\" novalidate autocomplete=\"off\" action=\"/\" method=\"post\"\u003e\n\n  \u003c!-- Single --\u003e\n  \u003cdiv class=\"field\"\u003e\n    \u003clabel class=\"main\"\u003eUsername:\u003c/label\u003e\n    \u003cinput name=\"username\" type=\"text\" data-idealforms-rules=\"required username\"\u003e\n    \u003cspan class=\"error\"\u003e\u003c/span\u003e\n  \u003c/div\u003e\n  \n  \u003c!-- Group\n  On inputs that share the same name,\n  you only need to add the rules on the first one --\u003e\n  \u003cdiv class=\"field\"\u003e\n    \u003clabel class=\"main\"\u003eHobbies:\u003c/label\u003e\n    \u003cp class=\"group\"\u003e\n      \u003clabel\u003e\u003cinput name=\"group[]\" type=\"checkbox\" value=\"A\" data-idealforms-rules=\"minoption:1 maxoption:2\"\u003eA\u003c/label\u003e\n      \u003clabel\u003e\u003cinput name=\"group[]\" type=\"checkbox\" value=\"B\"\u003eB\u003c/label\u003e\n      \u003clabel\u003e\u003cinput name=\"group[]\" type=\"checkbox\" value=\"C\"\u003eC\u003c/label\u003e\n    \u003c/p\u003e\n    \u003cspan class=\"error\"\u003e\u003c/span\u003e\n  \u003c/div\u003e\n  \n\u003c/form\u003e\n```\n\n### Custom Markup\n\nIdeal Forms 3 has been built from scratch with flexibility in mind. The markup is no longer tied to the plugin. If the default markup doesn't work for you, you can create your own markup. Ideal Forms will look for the following:\n\n- **A field:** A field must contain at least a label, an input and an error.\n- **A label:** The label to identify the field.\n- **An input or group of inputs:** Must be a single input or multiple related inputs such as checkboxes or radios. A field _cannot_ contain inputs with different `name` attributes; this is a limitation by design.\n- **An error container:** An element to hold the error.\n\nThen you have to tell Ideal Forms that you want to use custom markup. You can specify these options when initializing the plugin:\n\n```javascript\n$('form').idealforms({\n  field: '.myfield', // selector\n  error: '.myerror', // selector\n  validClass: 'myvalid', // class name\n  invalidClass: 'myinvalid' // class name\n});\n```\n\n[![TOC](http://i.imgur.com/RDbarNr.png)](#table-of-contents)\n\n## Adding Rules\n\nPass an object to the `rules` option, where each key corresponds to a `name` attribute and each value is a string of rules assigned to that input. Always quote keys for consistency:\n\n```javascript\n$('form').idealforms({\n  rules: {\n    'username': 'required username',\n    'password': 'required password',\n    'sex': 'minoption:1',\n    'hobbies[]': 'minoption:1 maxoption:2',\n    'options': 'select:default'\n  }\n});\n```\n\nYou can also add rules after initializing the plugin:\n\n```javascript\n$('form').idealforms('addRules', {\n  'comments': 'required minmax:50:200'\n});\n```\n\n### Custom Errors\n\nTo display your own custom errors for the rules you added pass the names and a list of errors for each field:\n\n```javascript\n$('form').idealforms({\n  \n  rules: {\n    ...\n  },\n  \n  errors: {\n    'username': {\n      required: 'Please enter a username',\n      username: 'This username is not valid, try again'\n    },\n    'password': {\n      password: 'Please enter a secure password'\n    }\n  }\n});\n```\n\n[![TOC](http://i.imgur.com/RDbarNr.png)](#table-of-contents)\n\n## Built-in Rules\n\nA rule must be in this format `rule:param` where `rule` is the name of the `rule` and `param` is a rule parameter, for example `minmax:10:50` will use the `minmax` rule with two arguments, `10` and `50`.\n\n- **required:** The field is required. Only works with text inputs.\n- **digits:** Only digits.\n- **number:** Must be a number.\n- **username:** Must be between 4 and 32 characters long and start with a letter. You may use letters, numbers, underscores, and one dot.\n- **email:** Must be a valid email.\n- **pass:** Must be at least 6 characters long, and contain at least one number, one uppercase and one lowercase letter.\n- **strongpass:** Must be at least 8 characters long and contain at least one uppercase and one lowercase letter and one number or special character.\n- **phone:** Must be a valid US phone number.\n- **zip:** Must be a valid US zip code\n- **url:** Must be a valid URL.\n- **range:min:max:** Must be a number between `min` and `max`. Usually combined with `number` or `digits`.\n- **min:min:** Must be at least `min` characters long.\n- **max:max:** Must be no more that `max` characters long.\n- **minmax:min:max:** Must be between `min` and `max` characters long.\n- **minoption:min:** Must have at least `min` checkboxes or radios selected.\n- **maxoption:max:** Must have no more than `max` checkboxes or radios selected.\n- **select:default:** Make a select required, where `default` is the value of the default option.\n- **extension:ext:** Validates file inputs. You can have as many `ext` as you want.\n- **equalto:name:** Must be equal to another field where `name` is the name of the field.\n- **date:format:** Must a valid date in any format. The default is `mm/dd/yyyy` but you can pass any format with any separator, ie. `date:yyyy-mm-dd`.\n- **ajax:** See the built-in [Ajax Extension](#extension-ajax).\n\n[![TOC](http://i.imgur.com/RDbarNr.png)](#table-of-contents)\n\n## Methods\n\nTo call a method run `idealforms` on the form and pass the method and arguments:\n\n```javascript`\n$('form').idealforms('method', arg1, arg2, ...);\n```\n\nMethods that have a colon like `is:valid` return something other than the instance, so they can't be chained.\n\n### .idealforms('addRules', rules)\n  \nSee [Adding Rules](#adding-rules)\n\n### .idealforms('get:invalid')\n\nReturns a jQuery collection of all invalid fields. Access the `length` to check how many fields are invalid.\n\n### .idealforms('focusFirstInvalid')\n\nFocus the first invalid field.\n\n### .idealforms('is:valid', name)\n\nIf you pass a `name` it will check if that input is valid, otherwise it will check if all inputs are valid.\n\n### .idealforms('reset', name)\n\nIf you pass a `name` it will reset that single input, if you don't it will reset all inputs to zero. That means emptying all the values of text inputs, unchecking all checkboxes and radios, and reverting selects to their default option.\n\n[![TOC](http://i.imgur.com/RDbarNr.png)](#table-of-contents)\n\n## Built-in Extensions\n\nIdeal Forms 3 has been re-designed to be able to extend the core easily. Read on [Custom Extensions](#custom-extensions) to learn more.\n\nIdeal Forms comes with a few built-in extensions. Extensions can be disabled with the `disabledExtensions` option by passing a space separated string of extensions.\n\n```javascript\n$('form').idealforms({\n  disabledExtensions: 'dynamicFields steps customInputs ajax'\n});\n```\n\n### Extension: Dynamic Fields\n\n**Name:** `dynamicFields`\n\nDynamic Fields extends core with the following methods:\n\n#### .idealforms('addFields', fields)\n\nAdd fields to the form.\n\n- **fields:** And object where each key corresponds to the `name` attribute. The value of the object is another object that can contain any of the following options (* are required):\n\n```javascript\n{\n  type*: 'text:subtype | file | group:subtype | select',\n  label*: 'Label',\n  value: 'value',\n  attrs: 'attr=\"value\"',\n  after: 'name',\n  before: 'name',\n  list: [\n    { value: 'value', text: 'text' }\n    ...\n  ],\n  rules: 'rule rule rule'\n}\n```\n\nText subtypes include all HMTL5 text types, such as `email`, `number`, etc...\n\nGroup subtypes include `radio` and `checkbox`.\n\nIf `before` or `after` are not set, the field will be added at the end of the form.\n\n**Example:**\n\n```javascript\n$('form').idealforms('addFields', {\n  'fruits[]': {\n    type: 'group:checkbox',\n    label: 'Fruits',\n    list: [\n      { value: 'apple', text: 'Apple', attrs: 'checked' },\n      { value: 'orange', text: 'Orange' },\n      { value: 'banana', text: 'Banana' }\n    ],\n    rules: 'minoption:1 maxoption:2'\n  }\n});\n```\n\nThe HTML is generated according to built-in templates. If you're using your own custom markup you may need custom templates. Ideal Forms provides a simple templating system to easy the pain. These are the default templates that you may change in the options when calling the plugin. They are listed as real HTML for convenience but you must pass a string in the options (you can get the HTML from a script tag for example):\n\n```html\n\u003c!-- Base --\u003e\n\u003cdiv class=\"field\"\u003e\n  \u003clabel class=\"main\"\u003e{label}\u003c/label\u003e\n  {field}\n  \u003cspan class=\"error\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n\n\u003c!-- Text --\u003e\n\u003cinput name=\"{name}\" type=\"{subtype}\" value=\"{value}\" {attrs}\u003e\n\n\u003c!-- File --\u003e\n\u003cinput id=\"{name} \"name=\"{name}\" type=\"file\" value=\"{value}\" {attrs}\u003e\n\n\u003c!-- Textarea --\u003e\n\u003ctextarea name=\"{name}\" {attrs}\u003e{text}\u003c/textarea\u003e\n\n\u003c!-- Group --\u003e\n\u003cp class=\"group\"\u003e\n  {@list}\n  \u003clabel\u003e\u003cinput name=\"{name}\" type=\"{subtype}\" value=\"{#value}\" {#attrs}\u003e{#text}\u003c/label\u003e\n  {/list}\n\u003c/p\u003e\n\n\u003c!-- Select --\u003e\n\u003cselect name={name}\u003e\n  {@list}\n  \u003coption value=\"{#value}\"\u003e{#text}\u003c/option\u003e\n  {/list}\n\u003c/select\u003e\n```\n\n```javascript\n$('form').idealforms({\n\n  templates: {\n    base: '...',\n    text: '...',\n    file: '...',\n    textarea: '...',\n    group: '...',\n    select: '...'\n  }\n});\n```\n\nThe templating rules are:\n\n- **{var}:** A variable.\n- **{@list} html {/list}:** A loop.\n- **{#var}:** A loop variable (inside the loop).\n\n#### .idealforms('removeFields', names)\n\nRemove fields from the form.\n\n- **names:** A space separated string of `name` attributes.\n\n**Example:**\n\n```javascript\n$('form').idealforms('removeFields', 'username password hobbies[]');\n```\n\n#### .idealforms('toggleFields', names)\n\nShow or hide fields. When the fields are hidden they will be excluded from the validation.\n\n- **names:** A space separated string of `name` attributes.\n\n**Example:**\n\n```javascript\n$('form').idealforms('toggleFields', 'username password hobbies[]');\n```\n\nDynamic Fields adds injection points for `addFields:before`, `addFields:after`, `removeFields` and `toggleFields`. Read about [custom extensions](#custom-extensions) for more info.\n\n### Extension: Steps  \n\n**Name:** `steps`\n\nSteps let you organize your form in sections. Steps expects a container, navigation, wrapper, and at least one step. Using the default  options you may build your form like so:\n\n```html\n\u003cdiv class=\"idealsteps-container\"\u003e\n\n  \u003cnav class=\"idealsteps-nav\"\u003e\u003c/nav\u003e\n  \n  \u003cform\u003e\n  \n    \u003cdiv class=\"idealsteps-wrap\"\u003e\n    \n      \u003c!-- Step 1 --\u003e\n      \u003csection class=\"idealsteps-step\"\u003e\n        \u003c!-- Form fields --\u003e\n      \u003c/section\u003e\n      \n      \u003c!-- Step 2 --\u003e\n      \u003csection class=\"idealsteps-step\"\u003e\n        \u003c!-- Form fields --\u003e\n      \u003c/section\u003e\n           \n      \u003c!-- Step 3 --\u003e\n      \u003csection class=\"idealsteps-step\"\u003e\n        \u003c!-- Form fields --\u003e\n      \u003c/section\u003e\n    \n    \u003c/div\u003e\n  \n  \u003c/form\u003e\n  \n\u003c/div\u003e\n```\n\nSteps adds the following options to Ideal Forms:\n\n```javascript\n{\n  steps: {\n    container: 'idealsteps-container', // the main container\n    nav: '.idealsteps-nav', // navigation\n    navItems: 'li', // navigation element that receives events\n    // Build nav items as \"Step 1\", \"Step 2\"... automatically\n    // or pass your own custom function.\n    // Set to `false` to use your own custom markup\n    buildNavItems: function(i) {\n      return 'Step '+ (i+1);\n    },\n    wrap: '.idealsteps-wrap',\n    step: '.idealsteps-step',\n    activeClass: 'idealsteps-step-active',\n    before: null, // runs before changing steps\n    after: null, // runs after changing steps\n    fadeSpeed: 0\n  }\n}\n```\n\nFor example, you could build the steps with your own text like so:\n\n```javascript\nsteps: {\n  MY_stepsItems: ['One', 'Two', 'Three'],\n  buildNavItems: function(i) {\n    return this.opts.steps.MY_stepsItems[i];\n  }\n}\n```\n\nSteps provides these methods:\n\n#### .idealforms('goToStep', index)\n\nGo to the step number `index`. Indices start at `0`.\n\n#### .idealforms('prevStep')\n\nGo to the previous step. It wraps around.\n\n#### .idealforms('nextStep')\n\nGo to the next step. It wraps around.\n\n#### .idealforms('firstStep')\n\nGo to the first step.\n\n#### .idealforms('lastStep')\n\nGo to the last step.\n\nSteps adds the `appendToStep:index` option to `addFields`:\n\n```javascript\n$('form').addFields({ 'field': { type: 'text', label: 'Field', appendToStep: 1 }});\n```\n\n### Extension: Custom Inputs\n\nAdds custom checkboxes, radios and file inputs (yes!) seamlessly. The custom select menu has been dropped from Ideal Forms 3 but you can find a new simple replacement being maintained as [jquery.idealselect](https://github.com/elclanrs/jquery.idealselect).\n\n**Note:** File inputs must have an `id` as well as a `name` to work on IE.\n\nThis extension has no additional options or methods.\n\n### Extension: Ajax\n\n**Name:** `ajax`\n\nAdds an `ajax` rule. First specify a URL on your input:\n\n```html\n\u003cinput type=\"text\" name=\"username\" data-idealforms-ajax=\"test-username.php\"/\u003e\n```\n\nThen add the rule to the field _always_ at last and add an error to handle an invalid response:\n\n```javascript\n$('form').idealforms({\n  rules: {\n    'username': 'required username ajax'\n  },\n  errors: {\n    'username': {\n      ajax: 'Checking user availability...',\n      ajaxError: 'Username not available, try a different one.'\n    }\n  }\n});\n```\n\nThe ajax filter will read the URL and send a POST request to the server. The server side script must return a JSON encoded `true` (passes validation) or `false` (fails validation). for example in PHP:\n\n```php\n\u003c?php\necho json_encode(true);\n```\n\nIf the response gets delayed the field will switch into \"ajax mode\" by showing a loading icon until the response comes back.\n\n### Extension: Datepicker\n\n**Name:** `datepicker`\n\nAdds a datepicker to date inputs. You must include [jQuery UI](http://jqueryui.com/) first, then add the class `datepicker` to your date inputs:\n\n```html\n\u003cinput name=\"event\" type=\"text\" placeholder=\"mm/dd/yyyy\" class=\"datepicker\"\u003e\n```\n\nNow you can add the `date` rule:\n\n```javascript\n$('form').idealforms({\n  rules: {\n    'event': 'date'\n  }\n});\n```\n\nThe default format is `mm/dd/yyyy` for Ideal Forms and `mm/dd/yy` for the jQuery UI datepicker. Note that Ideal Forms represents years with `yyyy` not `yy`, but the formats are interchangeable.\n\n```javascript\n$('form').idealforms({\n  rules: {\n    'event': 'date:yyyy-mm-dd'\n  }\n});\n\n$('.datepicker').datepicker('option', 'dateFormat', 'yy-mm-dd');\n```\n### Extension: Adaptive\n\n**Name:** `adaptive`\n\nAdapts the form to the container when resizing the browser allowing it to work with any responsive grid system. Ideal Forms will add the class `adaptive` to the form and Steps navigation (if present) so you can add your own styles if you decide to use custom markup.\n\nIdeal Forms calculates the adaptive width at which the change of layout occurs. If you use custom markup and styles make sure to set the `adaptiveWidth` plugin option using the formula:\n\n```javascript\n$('form').idealforms({\n  adaptiveWidth: 600 // the total width of a field (label + input + icon + error)\n});\n```\n\n[![TOC](http://i.imgur.com/RDbarNr.png)](#table-of-contents)\n\n## Custom Rules\n\nYou can add rules by extending the global `rules` object:\n\n```javascript\n$.extend($.idealforms.rules, {\n\n  ruleRegex: /abc/g,\n  \n  // The rule is added as \"ruleFunction:arg1:arg2\"\n  // @param input {Node}\n  ruleFunction: function(input, value, arg1, arg2, ...) {\n  \n  }\n});\n```\n\nAfter you add a rule you must add an error for it, by extending the global `errors` object. Don't forget this step:\n\n```javascript\n$.extend($.idealforms.errors, {\n  ruleRegex: 'Must be a valid value for this rule',\n  ruleFunction: 'Must be a valid value. {0}, {1}'\n});\n```\n\nIf the rule is a function that takes rule parameters pass the parameters as `{0}`, `{1}`, etc. If you want to print all the parameters use `{*}` where the default separator is a comma but you can use your own like `{*~}` where `~` is the custom separator.\n\n[![TOC](http://i.imgur.com/RDbarNr.png)](#table-of-contents)\n\n## Custom Extensions\n\nTo add a custom extension provide a `name`, extended `options` and extended `methods` if any. You can inject code into the following built-in methods:\n\n- **_init:** Runs when the plugin is initialized, but before any initial input rules are added.\n- **_buildField(input):** Builds the input given the markup options to work with Ideal Forms. `input` is the current input element being built.\n- **_validate(input, rule, valid):** Runs right after the input has been validated. `input` is the input element, `rule` is the rule that tried to pass validation and `valid` is a boolean flag.\n- **addRules:** It gets invoked on `_init` to add the initial rules and whenever you add more rules to the form.\n- **focusFirstInvalid:** Inject code when the first input is focused.\n- **reset(name):** Reset the form. `name` is an input name, if any. Check the [reset](#idealformsreset-name) method.\n\nIt is recommended that you always namespace your extension, by prefixing it with a unique identifier. To allow for Ideal Forms localization, add the `i18n` option and all the strings that may change inside, then build your extension with localization in mind:\n\n```javascript\n$.idealforms.addExtension({\n\n  name: 'MY_extensionName',\n  \n  options: {\n    MY_extension: {\n      option: 'default',\n      i18n: {\n        initialized: 'Initialized'\n      }\n    }\n  },\n  \n  methods: {\n    \n    // @extend\n    _init: function() {\n      console.log(this.opts.i18n.initialized +'!');\n    },\n    \n    MY_newMethod: function() {\n    \n    }\n  }\n});\n```\n\nIf an extension depends on another extension you may use `_hasExtension`:\n\n```javascript\n_init: function() {  \n  if (this._hasExtension('ajax')) {\n    ...\n  }\n}\n```\n\n[![TOC](http://i.imgur.com/RDbarNr.png)](#table-of-contents)\n\n## Localization\n\nTo localize Ideal Forms load the corresponding i18n file from `js/i18n` **after** the plugin:\n\n```html\n\u003cscript src=\"jquery.idealforms.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"jquery.idealforms.i18n.es.js\"\u003e\u003c/script\u003e\n```\n\nCreating your own locale file:\n\n```javascript\n/**\n * i18n ES\n */\njQuery.idealforms.i18n.es = {\n\n  customInputs: {\n    open: 'Abrir'\n  },\n  \n  steps: {\n    step: 'Paso'\n  },\n\n  errors: {\n    required: 'Este campo es obligatorio',\n    digits: 'Debe contener sólo cifras',\n    name: 'Debe contener al menos 3 caracteres y contener únicamente letras',\n    ...\n  }\n};\n\n```\n\nExternal plugins like the jQuery UI datepicker have to be localized separately in their own way.\n\n## Themes\n\nIdeal Forms 3 themes are built with [Stylus](http://learnboost.github.io/stylus/). To create your own theme to use with the default markup open `styl/vars.stly`, modify what you need and [compile](#build--share).\n\n```sass\nvalid = #3F9DCC // valid font color\nvalid-bg = #EDF7FC // valid background color\ninvalid = #CC2A18 // invalid font color\ninvalid-bg = #FFEDED // invalid background color\najax = #CFAA19 // ajax font color\najax-bg = #FAF9E8 // ajax background color\nui-element = #ddd // buttons, select and steps backgruond color\nerror = #285d85 // error background color\n\nlabel-width = 120px // main labels width\ninput-width = 290px // input width applies to all fields\nerror-width = (input-width/1.5)\nradius = 3px // border-radius\n\nicon = true // disable icons (must disable in plugin options too)\nicon-size = 16px // must be square icon\nicon-padding = 8px // padding between icon, input and error\n\nradiocheck-sprite = true // `false` to use css-only style\nradiocheck-size = 18px // size for css-only radiocheck\ngroup-horizontal = false // group checkbox and radio horizontally\n```\n\nTo customize the theme in your CSS file make sure to always add the `form.idealforms` selector so it takes precedence over the default styles, for example, you may change the default label width like:\n\n```css\nform.idealforms label.main {\n  width: 200px;\n}\n```\n\n[![TOC](http://i.imgur.com/RDbarNr.png)](#table-of-contents)\n\n## FAQ\n\n### How to access the Ideal Forms plugin instance\n\nIdeal Forms attaches an instance of itself to your form(s). To access the instance (prototype) use `data`:\n\n```javascript\nvar instance = $('form').data('idealforms');\n```\n\nNow you an use methods like so:\n\n```javascript\ninstance.reset(); // reset the form\n```\n\n### Why the icons don't show up\n\nIdeal Forms assumes that your site has this common structure:\n\n```\nsite\n  + css\n  + img\n  + js\n    index.html\n```\n\nWhen you download Ideal Forms, make sure to place the images inside `img`. If your folder structure is different you have to open `css/jquery.idealforms.css` and search and replace `../img/` with the correct path to your images folder relative to the plugin.\n\n[![TOC](http://i.imgur.com/RDbarNr.png)](#table-of-contents)\n\n## Build \u0026 Share\n\nIdeal Forms 3 is built using some popular NodeJS tools. This is what you'll need to install globally:\n\n- [Stylus](https://github.com/learnboost/stylus)\n- [UglifyJS](https://github.com/mishoo/UglifyJS2)\n- [Browserify](https://github.com/substack/node-browserify)\n\nThen clone the repo, `cd` into the folder and run `npm install` to install dependencies.\n\nFinally run `watch -c sh compile.sh` to watch for changes and compile. Now you're ready to edit files and help make Ideal Forms better, or create your own fork.\n\nIf you want to test ajax make sure to run it on your localhost.\n\nThis instructions have only been tested on Ubuntu, but you should be able to compile on any Unix system. Some Windows terminal emulators don't provide the `watch` command, but you can still run the script normally with bash `sh compile.sh`.\n\n**Enjoy** ![smiley](http://www.4smileys.com/smileys/happy-smileys/happy-smiley11.gif)\n\n[![TOC](http://i.imgur.com/RDbarNr.png)](#table-of-contents)\n\n## Update History\n\n#### 01/25/14\n- Fix #30 and #32\n\n#### 09/10/13\n\n- Localization!\n\n#### 07/10/13\n- Alternative scalable radiocheck style without sprites\n\n#### 05/10/13\n- Adaptive extension brings back responsive theme.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felclanrs%2Fjq-idealforms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felclanrs%2Fjq-idealforms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felclanrs%2Fjq-idealforms/lists"}