Editable forms
Extension editable.min.js
Overview

This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes. This is a brief documentation, some kind of getting started section. Please refer to a complete documentation for a complete list of options and configuration parameters.

Usage

To use editable plugin, include path to the minified plugin file. Also include necessary plugins if you want to use them with editable plugin. In demo page, for demo purpose, also included mockjax.min.js extension for simulating AJAX requests. Include these files after jQuery library. Ordering matters:

<!-- Path to main file -->
<script type="text/javascript" src="assets/js/plugins/forms/editable/editable.min.js"></script>

<!-- Path to plugins -->
<script type="text/javascript" src="assets/js/plugins/..."></script>

<!-- Path to mockjax -->
<script type="text/javascript" src="assets/js/plugins/extensions/mockjax.min.js"></script>

1. Markup elements that should be editable. Usually it is <a> element with additional data-* attributes:

<!-- Editable element -->
<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">
	superuser
</a>

Main attributes you should define are:

  • type - type of input (text, textarea, select, etc)
  • url - url to server-side script to process submitted value (/post, post.php etc)
  • pk - primary key of record to be updated (ID in db)
  • id or name - name of field to be updated (column in db). Taken from id or data-name attribute
  • value - initial value. Usefull for select, where value is integer key of text to be shown. If empty - will be taken from element html contents

2. Setup editable mode: inline or popup (default):

// Turn on popup mode
$.fn.editable.defaults.mode = 'popup';

3. Apply editable() method to these elements:

// Initialize
$(document).ready(function() {
    $('#username').editable(options);
})

Alternatively, you can set all options via javascript

<!-- Editable element -->
<a href="#" id="username">superuser</a>
// Initialize with options
$('#username').editable({
    type: 'text',
    pk: 1,
    url: '/post',
    title: 'Enter username'
});
Default supported inputs

There are several input types supported by library. Each type may have additional configuration options. Input options are defined as well as other parameters of $().editable() method. Currently supported:

  • text
  • textarea
  • select
  • date
  • datetime
  • dateui
  • combodate
  • html5types
  • checklist
  • typeahead
  • typeaheadjs
  • select2
Options
Option Default Description
ajaxOptions null Additional options for submit ajax request. List of values: http://api.jquery.com/jQuery.ajax
anim false Animation speed (inline mode only)
autotext 'auto' Allows to automatically set element's text based on it's value. Can be auto|always|never
defaultValue null Value that will be displayed in input if original field value is empty (null|undefined|'')
disabled false Sets disabled state of editable
display null

Callback to perform custom displaying of value in element's text.

  • If null - default input's display used
  • If false - no displaying methods will be called, element's text will never change

Runs under element's scope.

Parameters:

  • value - current value to be displayed
  • response - server response (if display called after ajax submit)

For inputs with source (select, checklist) parameters are different:

  • value - current value to be displayed
  • sourceData - array of items for current input (e.g. dropdown items)
  • response - server response (if display called after ajax submit)
To get currently selected items use $.fn.editableutils.itemsByValue(value, sourceData)
emptyclass 'editable-empty' Css class applied when editable text is empty
emptytext 'Empty' Text shown when element is empty
error null Error callback. Called when request failed (response status != 200). Useful when you want to parse error response and display a custom message. Must return string - the message to be displayed in the error block
highlight '#FFFF80' Color used to highlight element after update. Implemented via CSS3 transition, works in modern browsers
mode 'popup' Mode of editable, can be popup or inline
name null Name of field. Will be submitted on server. Can be taken from id attribute
onblur 'cancel' Action when user clicks outside the container. Can be cancel|submit|ignore. Setting ignore allows to have several containers open
params null Additional params for submit. If defined as object - it is appended to original ajax data (pk, name and value). If defined as function - returned object overwrites original ajax data
pk null Primary key of editable object (e.g. record id in database). For composite keys use object, e.g. {id: 1, lang: 'en'}. Can be calculated dynamically via function
placement 'top' Placement of container relative to element. Can be top|right|bottom|left. Not used for inline container
savenochange false Whether to save or cancel value when it was not changed but form was submitted
selector null

If selector is provided, editable will be delegated to the specified targets. Usefull for dynamically generated DOM elements.

Please note, that delegated targets can't be initialized with emptytext and autotext options, as they actually become editable only after first click.

You should manually set class editable-click to these elements
send 'auto' Strategy for sending data on server. Can be auto|always|never. When 'auto' data will be sent on server only if pk and url defined, otherwise new value will be stored locally
showbuttons true Where to show buttons: left(true)|bottom|false. Form without buttons is auto-submitted
success null

Success callback. Called when value successfully sent on server and response status = 200. Usefull to work with json response. For example, if your backend response can be {success: true} or {success: false, msg: "server error"} you can check it inside this callback.

  • If it returns string - means error occured and string is shown as error message
  • If it returns object like {newValue: <something>} - it overwrites value, submitted by user
Otherwise newValue simply rendered into element
toggle 'click'

How to toggle editable. Can be click|dblclick|mouseenter|manual. When set to manual you should manually call show/hide methods of editable.

Note: if you call show or toggle inside click handler of some DOM element, you need to apply e.stopPropagation() because containers are being closed on any click on document
type 'text' Type of input. Can be text|textarea|select|date|checklist and more
unsavedclass 'editable-unsaved' Css class applied when value was stored but not sent to server (pk is empty or send = 'never'). You may set it to null if you work with editables locally and submit them together
url null Url for submit, e.g. '/post'. If function - it will be called instead of ajax. Function should return deferred object to run fail/done callbacks
validate null Function for client-side validation. If returns string - means validation not passed and string showed as error. Since 1.5.1 you can modify submitted value by returning object from validate: {newValue: '...'} or {newValue: '...', msg: '...'}
value element's text

Initial value of input. If not set, taken from element's text.

Note: if element's text is empty - text is automatically generated from value and can be customized (see autotext option)
Plugin info
Property Description
File name editable.min.js, address.js
Location assets/js/plugins/forms/editable/
Updates 0
Links

Official plugin website

Full documentation

Github project page
Textarea autosize
Extension autosize.min.js
Overview

Autosize is a small, stand-alone script to automatically adjust textarea height to fit text. Use CSS to specify a min-height and max-height for the textarea element. Once the height exceeds the max-height, autosize will re-enable the vertical scrollbar.
The rows attribute can also be used to specify a minimum height. The rows attribute has a default value of 2, so to make the textarea smaller than that you'll need to set the value to 1. Example: <textarea rows='1'></textarea>.

Usage

The autosize function accepts a single textarea element, or an array or array-like object (such as a NodeList or jQuery collection) of textarea elements:

// From a NodeList
autosize(document.querySelectorAll('textarea'));

// from a single Node
autosize(document.querySelector('textarea'));

// from a jQuery collection
autosize($('textarea'));
Life-cycle events
Event Description
autosize:update

Once you've assigned autosize to an element, you can manually trigger the resize event by using the 'autosize:update' event. Autosize has no way of knowing when a script has changed the value of a textarea element, or when the textarea element styles have changed, so this event would be used instruct autosize to resize the textarea

// 'Update' event
var ta = document.querySelector('textarea');

autosize(ta);

ta.value = "Some new value";

// Dispatch a 'autosize:update' event to trigger a resize:
var evt = document.createEvent('Event');
evt.initEvent('autosize:update', true, false);
ta.dispatchEvent(evt);																
autosize:autosize:destroy
// 'Destroy' event
var ta = document.querySelector('textarea');

// assign autosize to ta
autosize(ta);

// remove autosize from ta
var evt = document.createEvent('Event');
evt.initEvent('autosize:destroy', true, false);
ta.dispatchEvent(evt);																
autosize:resized

This event is fired every time autosize adjusts the textarea height.

// 'Resized' event
var ta = document.querySelector('textarea');

ta.addEventListener('autosize:resized', function(){
    console.log('textarea height updated');
});															

If you are using jQuery, you can use the on/off methods to listen to this event:

// 'Resized' event
$('textarea').each(function(){
    autosize(this);
}).on('autosize:resized', function(){
    console.log('textarea height updated');
});														
Methods

These methods are provided as an alternative to using the life-cycle events

Method Description
autosize.update(elements)

For manually recalculating the height for a textarea element, array, or array-like object

// 'Update' method
var ta = document.querySelector('textarea');

autosize(ta);

ta.value = "Some new value";

autosize.update(ta);															
autosize.destroy(elements)

Removes autosize and reverts it's changes from a textarea element, array, or array-like object

// 'Destroy' method
autosize.destroy(document.querySelectorAll('textarea'));															
Plugin info
Property Description
File name autosize.min.js
Location assets/js/plugins/forms/inputs/
Updates 0
Links

Official plugin website

Github project page
Dual listbox
Extension duallistbox.min.js
Overview

Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices. The dual listbox is created from a select multiple by calling .bootstrapDualListbox(settings); on a selector. The selector can be any element, not just selects. When the method is called on a selector other than a select, then all select childrens are converted into dual list boxes.

Usage

First you need to load jQuery library as Dual listbox plugin is jQuery dependent. Then add a path to the plugin file:

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/inputs/duallistbox.min.js"></script>

Then initialize via JavaScript:

// Multiple selection
$('.listbox-no-selection').bootstrapDualListbox({
    preserveSelectionOnMove: 'moved',
    moveOnSelect: false
});
Options

When calling $("#element").bootstrapDualListbox() you can pass a parameters object with zero or more of the following:

Option Default Description
bootstrap2Compatible false Set this to true if you want graphic compatibility with Bootstrap 2
filterTextClear 'show all' The text for the "Show All" button
filterPlaceHolder 'Filter' The placeholder for the input element for filtering elements
moveSelectedLabel 'Move selected' The label for the "Move Selected" button
moveAllLabel 'Move all' The label for the "Move All" button
removeSelectedLabel 'Remove selected' The label for the "Remove Selected" button
removeAllLabel 'Remove all' The label for the "Remove All" button
moveOnSelect true Determines whether to move options upon selection. This option is forced to true on the Android browser
preserveSelectionOnMove false Can be 'all' (for selecting both moved elements and the already selected ones in the target list) or 'moved' (for selecting moved elements only)
selectedListLabel false Can be a string specifying the name of the selected list
nonSelectedListLabel false Can be a string specifying the name of the non selected list
helperSelectNamePostfix '_helper' The added selects will have the same name as the original one, concatenated with this string and 1 (for the non selected list, e.g. element_helper1) or 2 (for the selected list, e.g. element_helper2)
selectorMinimalHeight 100 Represents the minimal height of the generated dual listbox
showFilterInputs true Whether to show filter inputs
nonSelectedFilter '' Initializes the dual listbox with a filter for the non selected elements. This is applied only if showFilterInputs is set to true
selectedFilter '' Initializes the dual listbox with a filter for the selected elements. This is applied only if showFilterInputs is set to true
infoText 'Showing all {0}' Determines which string format to use when all options are visible. Set this to false to hide this information. Remember to insert the {0} placeholder.
infoTextFiltered '<span class="label label-warning">Filtered</span> {0} from {1}' Determines which element format to use when some element is filtered. Remember to insert the {0} and {1} placeholders
infoTextEmpty 'Empty list' Determines the string to use when there are no options in the list
filterOnValues false Set this to true to filter the options according to their values and not their HTML contents
Methods

You can modify the behavior and aspect of the dual listbox by calling its methods, all of which accept a value and a refresh option. The value determines the new parameter value, while refresh (optional, defaults to false) tells whether to update the plugin UI or not.

Note: when making multiple chained calls to the plugin, set refresh to true to the last call only, in order to make a unique UI change; alternatively, you can also call the refresh method as your last one.

To call methods on the dual listbox instance, use the following syntax:

// Syntax
$(selector).bootstrapDualListbox(methodName, parameter);

Here are the available methods:

Method Description
refresh() Update the plugin element UI
destroy() Restore the original select element and delete the plugin element
getContainer() Get the container element
setBootstrap2Compatible(value, refresh) Change the bootstrap2Compatible parameter
setFilterTextClear(value, refresh) Change the filterTextClear parameter
setFilterPlaceHolder(value, refresh) Change the filterPlaceHolder parameter
setMoveSelectedLabel(value, refresh) Change the moveSelectedLabel parameter
setMoveAllLabel(value, refresh) Change the moveAllLabel parameter
setRemoveSelectedLabel(value, refresh) Change the removeSelectedLabel parameter
setRemoveAllLabel(value, refresh) Change the removeAllLabel parameter
setMoveOnSelect(value, refresh) Change the moveOnSelect parameter
setPreserveSelectionOnMove(value, refresh) Change the preserveSelectionOnMove parameter
setSelectedListLabel(value, refresh) Change the selectedListLabel parameter
setNonSelectedListLabel(value, refresh) Change the nonSelectedListLabel parameter
setHelperSelectNamePostfix(value, refresh) Change the helperSelectNamePostfix parameter
setSelectOrMinimalHeight(value, refresh) Change the selectOrMinimalHeight parameter
setShowFilterInputs(value, refresh) Change the showFilterInputs parameter
setNonSelectedFilter(value, refresh) Change the nonSelectedFilter parameter
setSelectedFilter(value, refresh) Change the selectedFilter parameter
setInfoText(value, refresh) Change the infoText parameter
setInfoTextFiltered(value, refresh) Change the infoTextFiltered parameter
setInfoTextEmpty(value, refresh) Change the infoTextEmpty parameter
setFilterOnValues(value, refresh) Change the filterOnValues parameter
Plugin info
Property Description
File name duallistbox.min.js
Location assets/js/plugins/forms/inputs/
Updates 0
Links

Official plugin website

Github project page
Input formatter
Extension formatter.min.js
Overview

Sometimes it is useful to format user input as they type. Existing libraries lacked proper functionality / flexibility. Formatter was built from the ground up with no dependencies. There is however a jquery wrapper version for quick use.

Usage

First you need to load jQuery library as Input formatter plugin is jQuery dependent. Then add a path to the plugin file:

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/inputs/formatter.min.js"></script>

Then initialize via JavaScript:

// Initialize
$('#credit-input').formatter({
	'pattern': '{{999}}-{{999}}-{{999}}-{{9999}}',
	'persistent': true
});
Options
Option Value Description
pattern ''

Required. String representing the pattern of your formatted input. User input areas begin with {{ and end with }}. For example, a phone number may be represented: ({{999}}) {{999}}-{{999}}. You can specify numbers, letters, or numbers and letters:

  • 9: [0-9]
  • a: [A-Za-z]
  • *: [A-Za-z0-9]
persistent false Boolean representing if the formatted characters are always visible (persistent), or if they appear as you type
patterns 'Filter' The placeholder for the input element for filtering elements
moveSelectedLabel ''

Optional, replaces pattern. Array representing a priority ordered set of patterns that may apply dynamically based on the current input value. Each value in the array is an object, whose key is a regular expression string and value is a pattern (see above). The regular expression is tested against the unformatted input value. You may use the special key '*' to catch all input values:

// Syntax
[
	{ '^\d{5}$': 'zip: {{99999}}' },
	{ '^.{6,8}$: 'postal code: {{********}}' },
	{ '*': 'unknown: {{**********}}' }
]
Methods
Method Description
Class methods
addInptType(char, regexp)

Add regular expressions for different input types.

// Class methods
$.fn.formatter.addInptType('L', /[A-Z]/);
Instance methods
resetPattern(pattern)

Fairly self explanatory here :) reset the pattern on an existing Formatter instance. Assuming you already initiated formatter on #selector

// Instance methods
$('#selector').formatter().resetPattern();
Plugin info
Property Description
File name formatter.min.js
Location assets/js/plugins/forms/inputs/
Updates 0
Links

Official plugin website

Github project page
Bootstrap maxlength
Extension maxlength.min.js
Overview

This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute maxlength to work. The indicator badge shows up on focusing on the element, and disappears when the focus is lost.

Usage

First you need to load jQuery library as Bootstrap maxlength plugin is jQuery dependent. Then add a path to the plugin file:

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/inputs/maxlength.min.js"></script>

Then initialize via JavaScript:

// Initialize
$('input[maxlength]').maxlength({
	// options
});
Options
Option Default Description
alwaysShow false If true the threshold will be ignored and the remaining length indication will be always showing up while typing or on focus on the input
threshold 10 This is a number indicating how many chars are left to start displaying the indications
warningClass label label-success It's the class of the element with the indicator. By default is the bootstrap label label-success but can be changed to anything you'd like
limitReachedClass label label-danger It's the class the element gets when the limit is reached
separator '/' Represents the separator between the number of typed chars and total number of available chars
preText '' String of text that can be outputted in front of the indicator
postText '' String outputted after the indicator
showMaxLength true If false, will display just the number of typed characters, e.g. will not display the max length
showCharsTyped true If false, will display just the remaining length, e.g. will display remaining lenght instead of number of typed characters
placement 'bottom' String, define where to output the counter. Possible values are: bottom, left, top, right, bottom-right, top-right, top-left, bottom-left and centered-right
appendToParent '' Appends the maxlength indicator badge to the parent of the input rather than to the body
message '' An alternative way to provide the message text, i.e. 'You have typed %charsTyped% chars, %charsRemaining% of %charsTotal% remaining'. %charsTyped%, %charsRemaining% and %charsTotal% will be replaced by the actual values. This overrides the options separator, preText, postText and showMaxLength. Alternatively you may supply a function that the current text and max length and returns the string to be displayed
utf8 false If true the input will count using utf8 bytesize/encoding. For example: the '£' character is counted as two characters
twoCharLinebreak '' Count linebreak as 2 characters to match IE/Chrome textarea validation
customMaxAttribute '' Allows a custom attribute to display indicator without triggering native maxlength behaviour. Ignored if value greater than a native maxlength attribute. 'overmax' class gets added when exceeded to allow user to implement form validation
placement this

String, object, or function, to define where to output the counter.

  • Possible string values are: bottom (default option), left, top, right, bottom-right, top-right, top-left, bottom-left and centered-right.
  • Custom placements can be passed as an object, with keys top, right, bottom, left, and position. These are passed to $.fn.css
  • A custom function may also be passed. This method is invoked with the {$element} Current Input, the {$element} MaxLength Indicator, and the Current Input's Position {bottom height left right top width}
Events
Event Description
maxlength.reposition On an input element triggers re-placing of its indicator. Useful if textareas are resized by an external trigger
maxlength.shown Triggered when the indicator is displayed
maxlength.hidden Triggered when the indicator is removed from view
Plugin info
Property Description
File name maxlength.min.js
Location assets/js/plugins/forms/inputs/
Updates 0
Links

Official plugin website

Github project page
Passy
Extension passy.js
Overview

You cant emphasize the importance of good passwords. Passy plugin was created to make it easier for developers to give good feedback on a password. Passy is a jQuery plugin to rate and generate passwords.

Usage

First you need to load jQuery library as Passy plugin is jQuery dependent. Then add a path to the plugin file:

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/inputs/passy.js"></script>

Then initialize via JavaScript:

// Initialization example
$('input').passy(function( strength, valid ) {

	// Set color based on validness and strength
	if(valid) {
		if( strength < $.passy.strength.HIGH) {
			color = 'orange';
		} else {
			color = 'green';
		}
	} else {
		color = 'red';
	}

	$(this).css('background-color', color);
});
Configuration

Before calling .passy(), you can alter these settings:

// Requirements a inserted password should meet
$.passy.requirements = {

	// Character types a password should contain
	characters: [
		$.passy.character.DIGIT,
		$.passy.character.LOWERCASE,
		$.passy.character.UPPERCASE,
		$.passy.character.PUNCTUATION
	],

	// A minimum and maximum length
	length: {
		min: 8,
		max: Infinity
	}
};


// Thresholds are numeric values representing
// the estimated amount of days for a single computer
// to brute force the password, assuming it processes
// about 1,000,000 passwords per second

$.passy.threshold = {
	medium: 365,
	high: Math.pow( 365, 2 ),
	extreme: Math.pow( 365, 5 )
};
Methods

Generate a password of a specific length:

// 'Generate method'
$('input').passy('generate', 16);

Check if a field’s content is valid:

// 'Valid' method
if (
	$('input').passy('valid')
)
{ ... }
Plugin info
Property Description
File name passy.js
Location assets/js/plugins/forms/inputs/
Updates 0
Links

Official plugin website

Github project page
Touchspin spinners
Extension touchspin.min.js
Overview

A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.

Usage

First you need to load jQuery library as Touchspin plugin is jQuery dependent. Then add a path to the plugin file:

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/inputs/touchspin.min.js"></script>

Create element:

<!-- Touchspin element -->
<input id="demo1" type="text" value="55" name="demo1">

Then initialize via JavaScript:

// Initialization example
$("input[name='demo1']").TouchSpin({
    min: 0,
    max: 100,
    step: 0.1,
    decimals: 2,
    boostat: 5,
    maxboostedstep: 10,
    postfix: '%'
});
Touchspin options
Option Default Description
initval "" Applied when no explicit value is set on the input with the value attribute. Empty string means that the value remains empty on initialization.
min 0 Minimum value.
max 100 Maximum value.
step 1 Incremental/decremental step on up/down change.
forcestepdivisibility 'round' How to force the value to be divisible by step value: 'none' | 'round' | 'floor' | 'ceil'
decimals 0 Number of decimal points.
stepinterval 100 Refresh rate of the spinner in milliseconds.
stepintervaldelay 500 Time in milliseconds before the spinner starts to spin.
verticalbuttons false Enables the traditional up/down buttons.
verticalupclass 'glyphicon glyphicon-chevron-up' Class of the up button with vertical buttons mode enabled.
verticaldownclass 'glyphicon glyphicon-chevron-down' Class of the down button with vertical buttons mode enabled.
prefix "" Text before the input.
postfix "" Text after the input.
prefix_extraclass "" Extra class(es) for prefix.
postfix_extraclass "" Extra class(es) for postfix.
booster true If enabled, the the spinner is continually becoming faster as holding the button.
boostat 10 Boost at every nth step.
maxboostedstep false Maximum step when boosted.
mousewheel true Enables the mouse wheel to change the value of the input.
buttondown_class 'btn btn-default' Class(es) of down button.
buttonup_class 'btn btn-default' Class(es) of up button.
Touchspin events

Triggered events

The following events are triggered on the original input by the plugin and can be listened on.

Event Description
change Triggered when the value is changed with one of the buttons (but not triggered when the spinner hits the limit set by settings.min or settings.max.
touchspin.on.startspin Triggered when the spinner starts spinning upwards or downwards.
touchspin.on.startupspin Triggered when the spinner starts spinning upwards.
touchspin.on.startdownspin Triggered when the spinner starts spinning downwards.
touchspin.on.stopspin Triggered when the spinner stops spinning.
touchspin.on.stopupspin Triggered when the spinner stops upspinning.
touchspin.on.stopdownspin Triggered when the spinner stops downspinning.
touchspin.on.min Triggered when the spinner hits the limit set by settings.min.
touchspin.on.max Triggered when the spinner hits the limit set by settings.max.

Callable events

The following events can be triggered on the original input. Example usage:

// 'upOnce' event
$("input").trigger("touchspin.uponce");

// 'updateSettings' event
$("input").trigger("touchspin.updatesettings", {
	max: 1000
});
Event Description
change Triggered when the value is changed with one of the buttons (but not triggered when the spinner hits the limit set by settings.min or settings.max.
touchspin.on.startspin Triggered when the spinner starts spinning upwards or downwards.
touchspin.on.startupspin Triggered when the spinner starts spinning upwards.
touchspin.on.startdownspin Triggered when the spinner starts spinning downwards.
touchspin.on.stopspin Triggered when the spinner stops spinning.
touchspin.on.stopupspin Triggered when the spinner stops upspinning.
touchspin.on.stopdownspin Triggered when the spinner stops downspinning.
touchspin.on.min Triggered when the spinner hits the limit set by settings.min.
touchspin.on.max Triggered when the spinner hits the limit set by settings.max.
Plugin info
Property Description
File name touchspin.min.js
Location assets/js/plugins/forms/inputs/
Updates 0
Links

Official plugin website

Github project page
Twitter typeahead
Extension /forms/inputs/typeahead/
Overview

Typeahead is a flexible JavaScript library that provides a strong foundation for building robust typeaheads. The typeahead.js library consists of 2 components: the suggestion engine - Bloodhound, and the UI view - Typeahead. The suggestion engine is responsible for computing suggestions for a given query. The UI view is responsible for rendering suggestions and handling DOM interactions. Both components can be used separately, but when used together, they can provide a rich typeahead experience.

Main Typeahead features:

  • Displays suggestions to end-users as they type
  • Shows top suggestion as a hint (i.e. background text)
  • Supports custom templates to allow for UI flexibility
  • Works well with RTL languages and input method editors
  • Highlights query matches within the suggestion
  • Triggers custom events to encourage extensibility
Usage

Load library itself, Bloodhound engine is already integrated to the main file:

<!-- Load library -->
<script type="text/javascript" src="assets/js/plugins/forms/inputs/typeahead/typeahead.bundle.min.js"></script>

Create element:

<!-- Typeahead element -->
<div id="the-basics">
  <input class="typeahead" type="text" placeholder="States of USA">
</div>

Then initialize via JavaScript:

// Initialization example
$('.typeahead').typeahead({
	minLength: 3,
	highlight: true
},
{
	name: 'my-dataset',
	source: mySource
});
Typeahead options
Option Default Description
highlight false If true, when suggestions are rendered, pattern matches for the current query in text nodes will be wrapped in a strong element with its class set to {{classNames.highlight}}
hint true If false, the typeahead will not show a hint
minLength 1 The minimum character length needed before suggestions start getting rendered
classNames '' For overriding the default class names used
Typeahead datasets

A typeahead is composed of one or more datasets. When an end-user modifies the value of a typeahead, each dataset will attempt to render suggestions for the new value.

For most use cases, one dataset should suffice. It's only in the scenario where you want rendered suggestions to be grouped based on some sort of categorical relationship that you'd need to use multiple datasets. For example, on twitter.com, the search typeahead groups results into recent searches, trends, and accounts – that would be a great use case for using multiple datasets.

Datasets can be configured using the following options:

Option Description
source [Required]. The backing data source for suggestions. Expected to be a function with the signature (query, syncResults, asyncResults). syncResults should be called with suggestions computed synchronously and asyncResults should be called with suggestions computed asynchronously (e.g. suggestions that come for an AJAX request). source can also be a Bloodhound instance
async Lets the dataset know if async suggestions should be expected. If not set, this information is inferred from the signature of source i.e. if the source function expects 3 arguments, async will be set to true
name The name of the dataset. This will be appended to {{classNames.dataset}} - to form the class name of the containing DOM element. Must only consist of underscores, dashes, letters (a-z), and numbers. Defaults to a random number
limit The max number of suggestions to be displayed. Defaults to 5
display For a given suggestion, determines the string representation of it. This will be used when setting the value of the input control after a suggestion is selected. Can be either a key string or a function that transforms a suggestion object into a string. Defaults to stringifying the suggestion
templates A hash of templates to be used when rendering the dataset. Note a precompiled template is a function that takes a JavaScript object as its first argument and returns a HTML string
[templates] notFound Rendered when 0 suggestions are available for the given query. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query
[template] pending Rendered when 0 synchronous suggestions are available but asynchronous suggestions are expected. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query
[template] header Rendered at the top of the dataset when suggestions are present. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query and suggestions
[template] footer Rendered at the bottom of the dataset when suggestions are present. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query and suggestions
[template] suggestion Used to render a single suggestion. If set, this has to be a precompiled template. The associated suggestion object will serve as the context. Defaults to the value of display wrapped in a div tag i.e. <div>{{value}}</div>
Custom events

The following events get triggered on the input element during the life-cycle of a typeahead. Note: Every event does not supply the same arguments. See the event descriptions below for details on each event's argument list.

Event Description
typeahead:active Fired when the typeahead moves to active state
typeahead:idle Fired when the typeahead moves to idle state
typeahead:open Fired when the results container is opened
typeahead:close Fired when the results container is closed
typeahead:change Normalized version of the native change event. Fired when input loses focus and the value has changed since it originally received focus
typeahead:render Fired when suggestions are rendered for a dataset. The event handler will be invoked with 4 arguments: the jQuery event object, the suggestions that were rendered, a flag indicating whether the suggestions were fetched asynchronously, and the name of the dataset the rendering occurred in
typeahead:select Fired when a suggestion is selected. The event handler will be invoked with 2 arguments: the jQuery event object and the suggestion object that was selected
typeahead:autocomplete Fired when a autocompletion occurs. The event handler will be invoked with 2 arguments: the jQuery event object and the suggestion object that was used for autocompletion
typeahead:cursorchange Fired when the results container cursor moves. The event handler will be invoked with 2 arguments: the jQuery event object and the suggestion object that was moved to
typeahead:asyncrequest Fired when an async request for suggestions is sent. The event handler will be invoked with 3 arguments: the jQuery event object, the current query, and the name of the dataset the async request belongs to
typeahead:asynccancel Fired when an async request is cancelled. The event handler will be invoked with 3 arguments: the jQuery event object, the current query, and the name of the dataset the async request belonged to
typeahead:asyncreceive Fired when an async request completes. The event handler will be invoked with 3 arguments: the jQuery event object, the current query, and the name of the dataset the async request belongs to

Example usage:

// Events usage
$('.typeahead').bind('typeahead:select', function(ev, suggestion) {
	console.log('Selection: ' + suggestion);
});
Class Names
Class Defaults Description
input .tt-input Added to input that's initialized into a typeahead
hint .tt-hint Added to hint input
menu .tt-menu Added to menu element
dataset tt-dataset Added to dataset elements
suggestion tt-suggestion Added to suggestion elements
empty .tt-empty Added to menu element when it contains no content
open .tt-open Added to menu element when it is opened
cursor .tt-cursor Added to suggestion element when menu cursor moves to said suggestion
highlight .tt-highlight Added to the element that wraps highlighted text

To override any of these defaults, you can use the classNames option:

// Override class names
$('.typeahead').typeahead({
	classNames: {
		input: 'Typeahead-input',
		hint: 'Typeahead-hint',
		selectable: 'Typeahead-selectable'
	}
});
Plugin info
Property Description
File name typeahead.bundle.min.js, handlebars.js
Location assets/js/plugins/forms/inputs/typeahead/
Updates 0
Links

Official plugin website

Typeahead documentation

Bloodhound documentation

Github project page
Form validation
Validation /forms/validation/
Overview

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup.

The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 other languages

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/validation/validate.min.js"></script>

Select a form to validate and call the validate method:

<!-- Create form -->
<form class="validate" id="commentForm" method="get" action="">
	<fieldset>
		<legend>Please provide your name, email address (won't be published) and a comment</legend>
		<p>
			<label for="cname">Name (required, at least 2 characters)</label>
			<input id="cname" name="name" minlength="2" type="text" required="required'">
		</p>
	</fieldset>
</form>

Finally call the plugin via JavaScript:

// Basic initialization
$("#commentForm").validate({
	// options
});
Validate options
Name Default Description
debug false Enables debug mode. If true, the form is not submitted and certain errors are displayed on the console (will check if a window.console property exists). Try to enable when a form is just submitted instead of validation stopping the submit
submitHandler native form submit Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated
invalidHandler {} Callback for custom code when an invalid form is submitted. Called with an event object as the first argument, and the validator as the second
ignore ":hidden" Elements to ignore when validating, simply filtering them out. jQuery's not-method is used, therefore everything that is accepted by not() can be passed as this option. Inputs of type submit and reset are always ignored, so are disabled elements
rules read from markup (classes, attributes, data) Key/value pairs defining custom rules. Key is the name of an element (or a group of checkboxes/radio buttons), value is an object consisting of rule/parameter pairs or a plain String. Can be combined with class/attribute/data rules. Each rule can be specified as having a depends-property to apply the rule only in certain conditions
messages Default message for the method used Key/value pairs defining custom messages. Key is the name of an element, value the message to display for that element. Instead of a plain message, another map with specific messages for each rule can be used. Overrides the title attribute of an element or the default message for the method (in that order). Each message can be a String or a Callback. The callback is called in the scope of the validator, with the rule's parameters as the first argument and the element as the second, and must return a String to display as the message
groups [] Specify grouping of error messages. A group consists of an arbitrary group name as the key and a space separated list of element names as the value. Use errorPlacement to control where the group message is placed
onsubmit true Validate the form on submit. Set to false to use only other events for validation. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value
onfocusout {} Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value
onkeyup {} Validate elements on keyup. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked on each key up event. Set to false to disable. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value
onclick {} Validate checkboxes and radio buttons on click. Set to false to disable. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value
focusInvalid true Focus the last active or first invalid element on submit via validator.focusInvalid(). The last active element is the one that had focus when the form was submitted, avoiding stealing its focus. If there was no element focused, the first one in the form gets it, unless this option is turned off
focusCleanup false If enabled, removes the errorClass from the invalid elements and hides all error messages whenever the element is focused. Avoid combination with focusInvalid
errorClass 'error' Use this class to create error labels, to look for existing error labels and to add it to invalid elements
validClass 'valid' This class is added to an element after it was validated and considered valid
errorElement 'label' Use this element type to create error messages and to look for existing error messages. The default, "label", has the advantage of creating a meaningful link between error message and invalid field using the for attribute (which is always used, regardless of element type)
wrapper 'window' Wrap error labels with the specified element. Useful in combination with errorLabelContainer to create a list of error messages
errorLabelContainer - Hide and show this container when validating
errorContainer - Hide and show this container when validating
showErrors {} A custom message display handler. Gets the map of errors as the first argument and an array of errors as the second, called in the context of the validator object. The arguments contain only those elements currently validated, which can be a single element when doing validation onblur/keyup. You can trigger (in addition to your own messages) the default behaviour by calling this.defaultShowErrors()
errorPlacement After the invalid element Customize placement of created error labels. First argument: The created error label as a jQuery object. Second argument: The invalid element as a jQuery object
success - If specified, the error label is displayed to show a valid element. If a String is given, it is added as a class to the label. If a Function is given, it is called with the label (as a jQuery object) and the validated input (as a DOM element). The label can be used to add a text like "ok!"
highlight Adds errorClass to the element How to highlight invalid fields. Override to decide which fields and how to highlight
unhighlight Removes the errorClass Called to revert changes made by option highlight, same arguments as highlight
ignoreTitle false Set to skip reading messages from the title attribute, helps to avoid issues with Google Toolbar; default is false for compability, the message-from-title is likely to be completely removed in a future release
Plugin methods

This library adds three jQuery plugin methods, the main entry point being the validate method:

Method Description
validate() Validates the selected form
valid() Checks whether the selected form or selected elements are valid
rules() Read, add and remove rules for an element
Custom selectors

This library also extends jQuery with three custom selectors:

Method Description
:blank Selects all elements with a blank value
:filled Selects all elements with a filled value
:unchecked Selects all elements that are unchecked
Validator

The validate method returns a Validator object that has a few public methods that you can use to trigger validation programmatically or change the contents of the form. The validator object has more methods, but only those documented here are intended for usage.

Method Description
Validator.form() Validates the form
Validator.element() Validates a single element
Validator.resetForm() Resets the controlled form
Validator.showErrors() Show the specified messages
Validator.numberOfInvalids() Returns the number of invalid fields
jQuery.validator.addMethod() Add a custom validation method
jQuery.validator.format() Replaces {n} placeholders with arguments
jQuery.validator.setDefaults() Modify default settings for validation
jQuery.validator.addClassRules() Add a compound class method
Built-in Validation methods

A set of standard validation methods is provided:

Method Description
required Makes the element required
remote Requests a resource to check the element for validity
minlength Makes the element require a given minimum length
maxlength Makes the element require a given maxmimum length
rangelength Makes the element require a given value range
min Makes the element require a given minimum
max Makes the element require a given maximum
range Makes the element require a given value range
email Makes the element require a valid email
url Makes the element require a valid url
date Makes the element require a date
dateISO Makes the element require an ISO date
number Makes the element require a decimal number
digits Makes the element require digits only
creditcard Makes the element require a credit card number
equalTo Requires the element to be the same as another one

Some more methods are provided as add-ons, and are currently included in additional-methods.js in the download package. Not all of them are documented here:

Method Description
accept Makes a file upload accept only specified mime-types
extension Makes the element require a certain file extension
phoneUS Validate for valid US phone number
require_from_group Ensures a given number of fields in a group are complete
Plugin info
Property Description
File name validate.min.js
Location assets/js/plugins/forms/validation/
Updates 0
Links

Official plugin website

Full documentation

Demonstration

Github project page
Bootstrap tagsinput
Tags tagsinput.min.js
Overview

Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags. Integrates with Twitter Bootstraps' 2.3.2 typeahead, or use custom typeahead when using Bootstrap 3.

Main features:

  • Objects as tags
  • True multi value
  • Typeahead
  • Designed for Bootstrap 2.3.2 and 3
Usage

The plugin is jQuery and Bootstrap dependent. Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load Bootstrap -->
<script type="text/javascript" src="assets/js/core/libraries/bootstrap.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/tags/tagsinput.min.js"></script>

Create an HTML element with id, class, or name attributes:

<!-- Create element -->
<input type="text" value="Amsterdam, Washington, Sydney, Beijing" class="tags-input">

Finally call the plugin via JavaScript:

// Basic initialization
$('.tags-input').tagsinput({
	// options
});
Plugin options
Name Description
tagClass Classname for the tags, or a function returning a classname
itemValue When adding objects as tags, itemValue must be set to the name of the property containing the item's value, or a function returning an item's value
itemText When adding objects as tags, you can set itemText to the name of the property of item to use for a its tag's text. You may also provide a function which returns an item's value. When this options is not set, the value of itemValue will be used
confirmKeys Array of keycodes which will add a tag when typing in the input. (default: [13, 188], which are ENTER and comma)
maxTags When set, no more than the given number of tags are allowed to add (default: undefined). When maxTags is reached, a class 'bootstrap-tagsinput-max' is placed on the tagsinput element
maxChars Defines the maximum length of a single tag. (default: undefined)
trimValue When true, automatically removes all whitespace around tags. (default: false)
allowDuplicates When true, the same tag can be added multiple times. (default: false)
freeInput Allow creating tags which are not returned by typeahead's source (default: true). This is only possible when using string as tags. When itemValue option is set, this option will be ignored
typeahead Object containing typeahead specific options
[typeahead] source An array (or function returning a promise or array), which will be used as source for a typeahead
onTagExists Function invoked when trying to add an item which allready exists. By default, the existing tag hides and fades in
Plugin methods

Example usage:

// Method usage example
$('input').tagsinput('add', 'some tag');

Available methods

Method Description
add Adds a tag
remove Removes a tag
removeAll Removes all tags
focus Sets focus in the tagsinput
input Returns the tagsinput's internal <input />, which is used for adding tags. You could use this to add your own typeahead behaviour for example
refresh Refreshes the tags input UI. This might be usefull when you're adding objects as tags. When an object's text changes, you'll have to refresh to update the matching tag's text
destroy Removes tagsinput behaviour
Plugin events

Example usage:

// Event usage example
$('input').on('beforeItemAdd', function(event) {
	// event.item: contains the item
	// event.cancel: set to true to prevent the item getting added
});

Available events

Method Description
beforeItemAdd Triggered just before an item gets added
itemAdded Triggered just after an item got added
beforeItemRemove Triggered just before an item gets removed
itemRemoved Triggered just after an item got removed
Plugin info
Property Description
File name tagsinput.min.js
Location assets/js/plugins/forms/tags/
Updates 0
Links

Official plugin website

Github project page
Tokenfield
Tags tokenfield.min.js
Overview

Advanced tagging/tokenizing plugin for jQuery and Twitter Bootstrap with a focus on keyboard and copy-paste support. Also supports validation states, typeahead implementation, different sizes and states, form layouts, directions, copy and paste, width options and other features.

Core features:

  • Copy & paste tokens with Ctrl+C and Ctrl+V
  • Keyboard navigation, delete tokens with keyboard (arrow keys, Shift + arrow keys)
  • Select specific tokens with Ctrl + click and Shift + click
  • Twitter Typeahead and jQuery UI Autocomplete support
Usage

The plugin is jQuery and Bootstrap (CSS only) dependent. Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/tags/tagsinput.min.js"></script>

Create an HTML element:

<!-- Create element -->
<input type="text" class="form-control" id="tokenfield-typeahead" value="red,green,blue">

Finally call the plugin via JavaScript:

// Basic initialization
$('.tokenfield').tokenfield({
	// options
});
Plugin options

Options for individual tokenfields can alternatively be specified through the use of data attributes, as explained below:

Name Default Description
tokens [] Tokens (or tags). Can be a string with comma-separated values, an array of strings or an array of objects
limit 0 Maximum number of tokens allowed. 0 = unlimited
minLength 0 Minimum length required for token value
minWidth 60 Minimum input field width. In pixels
autocomplete {} jQuery UI Autocomplete options
showAutocompleteOnFocus false Whether to show autocomplete suggestions menu on focus or not. Works only for jQuery UI Autocomplete, as Typeahead has no support for this kind of behavior
typeahead [] Arguments for Twitter Typeahead. The first argument should be an options hash (or null if you want to use the defaults). The second argument should be a dataset. Multiple datasets are also supported
createTokensOnBlur false Whether to turn input into tokens when tokenfield loses focus or not
delimiter ',' A character or an array of characters that will trigger token creation on keypress event. Defaults to ',' (comma). Note - this does not affect Enter or Tab keys, as they are handled in the keydown event. The first delimiter will be used as a separator when getting the list of tokens or copy-pasting tokens
beautify true Whether to insert spaces after each token when getting a comma-separated list of tokens
inputType 'text' HTML type attribute for the token input. This is useful for specifying an HTML5 input type like 'email', 'url' or 'tel' which allows mobile browsers to show a specialized virtual keyboard optimized for different types of input. This only sets the type of the visible token input, but does not touch the original input field. So you may set the original input to have type="text" but set this inputType option to 'email' if you only want to take advantage of the email style keyboard on mobile, but don't want to enable HTML5 native email validation on the original hidden input
Plugin methods

Example usage:

// Method usage example
$('#myField').tokenfield('createToken', {
	value: 'violet',
	label: 'Violet'
});

Available methods

Method Description
.tokenfield(options) Initializes an input with a tokenfield
.tokenfield('setTokens', tokens) Manually set the tokenfield content (replacing the old content)
.tokenfield('createToken', token) Manually create a token and append it to the input
.tokenfield('getTokens', active) Get an array of tokens from the input. Set active to true to return only selected tokens
.tokenfield('getTokensList', delimiter, beautify, active) Get a comma-separated list of the tokens from the input. You can use an alternative separator by supplying also a delimiter argument. Setting beautify to false will prevent adding a space after each token. Set active to true to return only selected tokens
.tokenfield('disable') Disable tokenfield (just like a normal input field)
.tokenfield('enable') Enable tokenfield (just like a normal input field)
.tokenfield('readonly') Make tokenfield a readonly field (just like a normal input field)
.tokenfield('writeable') Make tokenfield writeable (just like a normal input field)
.tokenfield('destroy') Destroy tokenfield and restore original input
Plugin events

Tokenfield exposes a few events for hooking into it's functionality. Example usage:

// Event usage example
$('#tokenfield').on('tokenfield:createtoken', function (e) {
	var data = e.attrs.value.split('|')
	e.attrs.value = data[1] || data[0]
	e.attrs.label = data[1] ? data[0] + ' (' + data[1] + ')' : data[0]
});

Available events

Method Description
tokenfield:initialize Fires after Tokenfield has been initialized
tokenfield:createtoken This event fires when a token is all set up to be created, but before it is inserted into the DOM and event listeners are attached. You can use this event to manipulate token value and label by changing the appropriate values of attrs property of the event. Calling event.preventDefault() or doing return false in the event handler will prevent the token from being created
tokenfield:createdtoken This event is fired after the token has been created. Here, attrs property of the event is also available, but is basically read-only. You can also get a direct reference to the token DOM object via e.relatedTarget
tokenfield:edittoken This event is fired just before a token is about to be edited. This allows you to manipluate the input field value before it is created. Again, to do this, manipluate the attrs property of the event. Here you can also access the token DOM object with e.relatedTarget. Calling event.preventDefault() or doing return false in the event handler will prevent the token from being edited
tokenfield:editedtoken This event is fired when a token is ready for being edited. It means that the token has been replaced by an input field
tokenfield:removetoken This event is fired right before a token is removed. Here you can also access the token DOM object with e.relatedTarget. Calling event.preventDefault() or doing return false in the event handler will prevent the token from being removed. You can access token label and value by checking the attrs property of the event. Also, e.relatedTarget is a reference to the token DOM object
tokenfield:removedtoken This event is fired right after a token is removed from the DOM. You can access token label and value by checking the attrs property of the event
Plugin info
Property Description
File name tokenfield.min.js
Location assets/js/plugins/forms/tags/
Updates 0
Links

Official plugin website

Github project page
Alpaca forms
Extensions alpaca.min.js
Overview

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.

Everything you need is provided out of the box. Alpaca comes pre-stocked with a large library of controls, templates, layouts and features to make rendering JSON-driven forms easy. It is designed around an extensible object-oriented pattern, allowing you to implement new controls, templates, I18N bundles and custom data persistence for your projects.

lpaca is open-source and provided to you under the Apache 2.0 license. It is supported by Cloud CMS and is in use by organizations and within projects all around the world.

Usage

The plugin is jQuery and Bootstrap (CSS only) dependent. Include the following lines of code in the <head> section of your HTML:

<!-- dependencies (jquery, handlebars and bootstrap) -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>
<link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 
<!-- alpaca -->
<link type="text/css" href="//code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.css" rel="stylesheet"/>
<script type="text/javascript" src="//code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.js"></script>

Create an HTML element:

<!-- Create element -->
<div id="form1"></div>

Finally call $.alpaca() with your form schema and any configuration:

// Basic initialization
$("#form1").alpaca({
    "schema": {
        "title": "What do you think of Alpaca?",
        "type": "object",
        "properties": {
            "name": {
                "type": "string",
                "title": "Name"
            },
            "ranking": {
                "type": "string",
                "title": "Ranking",
                "enum": ['excellent', 'not too shabby', 'alpaca built my hotrod']
            }
        }
    }
});
Alpaca documentation
Full Alpaca documentation can be found online on Official library website. It's quite big, with a lot of options, examples, events and methods. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Alpaca library.
Plugin info
Property Description
File name alpaca.min.js
Location assets/js/plugins/forms/inputs/
Updates 0
Links

Official plugin website

Full documentation

Github project page