Ideal 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:
Ideal 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:
- **A field:** A field must contain at least a label, an input and an error.
- **A label:** The label to identify the field.
- **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.
- **An error container:** An element to hold the error.
Then you have to tell Ideal Forms that you want to use custom markup. You can specify these options when initializing the plugin:
```javascript
$('form').idealforms({
field: '.myfield', // selector
error: '.myerror', // selector
validClass: 'myvalid', // class name
invalidClass: 'myinvalid' // class name
});
```
## Adding Rules
Pass 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:
```javascript
$('form').idealforms({
rules: {
'username': 'required username',
'password': 'required password',
'sex': 'minoption:1',
'hobbies[]': 'minoption:1 maxoption:2',
'options': 'select:default'
}
});
```
You can also add rules after initializing the plugin:
A 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`.
- **required:** The field is required. Only works with text inputs.
- **digits:** Only digits.
- **number:** Must be a number.
- **username:** Must be between 4 and 32 characters long and start with a letter. You may use letters, numbers, underscores, and one dot.
- **email:** Must be a valid email.
- **pass:** Must be at least 6 characters long, and contain at least one number, one uppercase and one lowercase letter.
- **strongpass:** Must be at least 8 characters long and contain at least one uppercase and one lowercase letter and one number or special character.
- **phone:** Must be a valid US phone number.
- **zip:** Must be a valid US zip code
- **url:** Must be a valid URL.
- **range:min:max:** Must be a number between `min` and `max`. Usually combined with `number` or `digits`.
- **min:min:** Must be at least `min` characters long.
- **max:max:** Must be no more that `max` characters long.
- **minmax:min:max:** Must be between `min` and `max` characters long.
- **minoption:min:** Must have at least `min` checkboxes or radios selected.
- **maxoption:max:** Must have no more than `max` checkboxes or radios selected.
- **select:default:** Make a select required, where `default` is the value of the default option.
- **extension:ext:** Validates file inputs. You can have as many `ext` as you want.
- **equalto:name:** Must be equal to another field where `name` is the name of the field.
- **ajax:** See the built-in [Ajax Extension](#ajax).
## Methods
To call a method run `idealforms` on the form and pass the method and arguments:
```javascript
$('form').idealforms('method', arg1, arg2, ...);
```
### .idealforms('addRules', rules)
See [Adding Rules](#adding-rules)
### .idealforms('get:invalid')
Returns a jQuery collection of all invalid fields. Access the `length` to check how many fields are invalid.
If 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.
Ideal Forms 3 has been re-designed to be able to extend the core easily. Read on [Custom Extensions](#custom-extensions) to learn more.
Ideal Forms comes with a few built-in extensions. Extensions can be disabled with the `disabledExtensions` option by passing a space separated string of extensions.
Dynamic Fields extends core with the following methods:
#### .idealforms('addFields', fields)
Add fields to the form.
- **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):
The 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):
Dynamic Fields adds injection points for `addFields`, `removeFields` and `toggleFields`. Read about [custom extensions](#custom-extensions) for more info.
Steps 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:
```html
<divclass="idealsteps-container">
<navclass="idealsteps-nav"></nav>
<form>
<divclass="idealsteps-wrap">
<!-- Step 1 -->
<sectionclass="idealsteps-step">
<!-- Form fields -->
</section>
<!-- Step 2 -->
<sectionclass="idealsteps-step">
<!-- Form fields -->
</section>
<!-- Step 3 -->
<sectionclass="idealsteps-step">
<!-- Form fields -->
</section>
</div>
</form>
</div>
```
Steps adds the following options to Ideal Forms:
```javascript
{
stepsContainer: 'idealsteps-container', // the main container
stepsOptions: { // the options for the Steps extension
nav: '.idealsteps-nav',
navItems: 'li',
// Build nav items as "Step 1", "Step 2"... automatically
// Set to `false` to use your own custom markup
buildNavItems: true,
wrap: '.idealsteps-wrap',
step: '.idealsteps-step',
activeClass: 'idealsteps-step-active',
before: null, // runs before changing steps
after: null, // runs after changing steps
fadeSpeed: 0
}
}
```
Steps provides these methods:
#### .idealforms('goToStep', index)
Go to the step number `index`. Indices start at `0`.
#### .idealforms('prevStep')
Go to the previous step. It wraps around.
#### .idealforms('nextStep')
Go to the next step. It wraps around.
#### .idealforms('firstStep')
Go to the first step.
#### .idealforms('lastStep')
Go to the last step.
### Extension: Custom Inputs
Adds custom checkboxes, radios and file inputs (yes!) seamlessly. The custom select menu has been dropped from Ideal Forms 3; it was proving to be a pain to maintain, and there are much better alternatives, such as [Select2](http://ivaynberg.github.io/select2/) if you need them.
This extension has no additional options or methods.
The 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:
```php
<?php
echo json_encode(true);
```
If the response gets delayed the field will switch into "ajax mode" by showing a loading icon until the response comes back.
The 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.
Adapts 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.
Ideal 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:
```javascript
$('form').idealforms({
adaptiveWidth: 600 // the total width of a field (label + input + icon + error)
After you add a rule you must add an error for it, by extending the global `errors` object. Don't forget this step:
```javascript
$.extend($.idealforms.errors, {
ruleRegex: 'Must be a valid value for this rule',
ruleFunction: 'Must be a valid value. {0}, {1}'
});
```
If 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.
To add a custom extension provide a `name`, extended `options` and extended `methods` if any. You can inject code into the following built-in methods:
- **_init:** Runs when the plugin is initialized, but before any initial input rules are added.
- **_buildField(input):** Builds the input given the markup options to work with Ideal Forms. `input` is the current input element being built.
- **_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.
- **addRules:** It gets invoked on `_init` to add the initial rules and whenever you add more rules to the form.
- **focusFirstInvalid:** Inject code when the first input is focused.
- **reset(name):** Reset the form. `name` is an input name, if any. Check the [reset](#idealformsreset-name) method.
Ideal 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).
```sass
valid = #3F9DCC // valid font color
valid-bg = #EDF7FC // valid background color
invalid = #CC2A18 // invalid font color
invalid-bg = #FFEDED // invalid background color
ajax = #CFAA19 // ajax font color
ajax-bg = #FAF9E8 // ajax background color
ui-element = #ddd // buttons, select and steps backgruond color
error = #285d85 // error background color
label-width = 120px // main labels width
input-width = 290px // input width applies to all fields
Ideal Forms assumes that your site has this common structure:
```
site
+ css
+ img
+ js
index.html
```
When 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.
Then clone the repo, `cd` into the folder and run `npm install` to install dependencies.
Finally 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.
If you want to test ajax make sure to run it on your localhost.
This 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`.
