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

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

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

// from a jQuery collection
autosize($('textarea'));

Life-cycle events

// '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);																

// '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);																

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

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

// '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

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

autosize(ta);

ta.value = "Some new value";

autosize.update(ta);															

// 'Destroy' method
autosize.destroy(document.querySelectorAll('textarea'));															

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 src="../../../../global_assets/js/plugins/forms/inputs/duallistbox/duallistbox.min.js"></script>

// 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:

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:

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 src="../../../../global_assets/js/plugins/forms/inputs/formatter.min.js"></script>

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

Options

// Syntax
[
	{ '^\d{5}$': 'zip: {{99999}}' },
	{ '^.{6,8}$: 'postal code: {{********}}' },
	{ '*': 'unknown: {{**********}}' }
]

Methods

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

// Instance methods
$('#selector').formatter().resetPattern();

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 src="../../../../global_assets/js/plugins/forms/inputs/maxlength.min.js"></script>

// Initialize
$('input[maxlength]').maxlength({
	// options
});

Options

Events

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 src="../../../../global_assets/js/plugins/forms/inputs/passy.js"></script>

// 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 method'
$('input').passy('generate', 16);

// 'Valid' method
if (
	$('input').passy('valid')
)
{ ... }

Overview

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

Usage

<!-- Load plugin -->
<script src="../../../../global_assets/js/plugins/forms/inputs/touchspin.min.js"></script>

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

// Initialization example
$("input[name='demo1']").TouchSpin({
    min: 0,
    max: 100,
    step: 0.1,
    decimals: 2,
    boostat: 5,
    maxboostedstep: 10,
    postfix: '%'
});

Touchspin options

Touchspin events

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

// 'updateSettings' event
$("input").trigger("touchspin.updatesettings", {
	max: 1000
});

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 -->
<script src="../../../../global_assets/js/plugins/forms/inputs/typeahead/typeahead.bundle.min.js"></script>

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

// Initialization example
$('.typeahead').typeahead({
	minLength: 3,
	highlight: true
},
{
	name: 'my-dataset',
	source: mySource
});

Typeahead options

Typeahead datasets

Datasets can be configured using the following options:

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.

Example usage:

// Events usage
$('.typeahead').bind('typeahead:select', function(ev, suggestion) {
	console.log('Selection: ' + suggestion);
});

Class Names

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'
	}
});

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

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load plugin -->
<script src="../../../../global_assets/js/plugins/forms/validation/validate.min.js"></script>

<!-- 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>

// Basic initialization
$("#commentForm").validate({
	// options
});

Validate options

Plugin methods

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

Custom selectors

This library also extends jQuery with three custom selectors:

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.

Built-in Validation methods

A set of standard validation methods is provided:

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:

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

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load Bootstrap -->
<script src="../../../../global_assets/js/main/bootstrap.min.js"></script>

<!-- Load plugin -->
<script src="../../../../global_assets/js/plugins/forms/tags/tagsinput.min.js"></script>

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

// Basic initialization
$('.tags-input').tagsinput({
	// options
});

Plugin options

Plugin methods

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

Available methods

Plugin events

// 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

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

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load plugin -->
<script src="../../../../global_assets/js/plugins/forms/tags/tagsinput.min.js"></script>

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

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

Plugin options

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

Plugin methods

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

Available methods

Plugin events

// 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

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

<!-- dependencies (jquery, handlebars and bootstrap) -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>
<script src="../../../../global_assets/js/main/bootstrap.min.js"></script>
 
<script src="../../../../global_assets/js/plugins/forms/inputs/alpaca/alpaca.min.js"></script>

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

// 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