Alpaca Forms - Address Field

The address field.

Properties

Title	Address
Description	Standard US Address with Street, City, State and Zip. Also comes with support for Google map.
JSON Schema Type(s)	any
Field Type	address
Base Field Type	object

Schema

Property	Type	Default	Description
default	any		The default value to be assigned for this property. If the data for the field is empty or not provided, this default value will be plugged in for you. Specify a default value when you want to pre-populate the field's value ahead of time.
dependencies	array		List of property dependencies.
description	string		Detailed description of the property.
disallow	array		List of disallowed values for the property.
format	string		Data format of the property.
maxProperties	number		The maximum number of properties that this object is allowed to have
minProperties	number		The minimum number of properties that this object is required to have
properties	object		List of child properties.
readonly	boolean		Indicates that the field is read-only. A read-only field cannot have it's value changed. Read-only fields render in a grayed-out or disabled control. If the field is rendered using a view with the `displayReadonly` attribute set to false, the read-only field will not appear.
required	boolean		Indicates whether the field's value is required. If set to true, the field must take on a valid value and cannnot be left empty or unassigned.
title	string		Short description of the property.
type	string	any	Data type of the property.

Options

Property	Type	Default	Description
animate	boolean	true	Up and down transitions will be animated
collapsed	boolean		Field set is initially collapsed if true.
collapsible	boolean		Field set is collapsible if true.
disabled	boolean		Field will be disabled if true.
fieldClass	string		Specifies one or more CSS classes that should be applied to the dom element for this field once it is rendered. Supports a single value, comma-delimited values, space-delimited values or values passed in as an array.
fields	object		List of options for child fields.
focus	checkbox	true	If true, the initial focus for the form will be set to the first child element (usually the first field in the form). If a field name or path is provided, then the specified child field will receive focus. For example, you might set focus to 'name' (selecting the 'name' field) or you might set it to 'client/name' which picks the 'name' field on the 'client' object.
form	object		Options for rendering the FORM tag.
helper	string		Field help message.
helpers	array		An array of field help messages. Each message will be displayed on it's own line.
helpersPosition	string	below	Defines the placement location of the helper text relative to the control (either 'above' or 'below')
hidden	boolean		Field will be hidden if true.
hideInitValidationError	boolean		Hide initial validation errors if true.
id	string		Unique field id. Auto-generated if not provided.
label	string		Field label.
lazyLoading	boolean		Child fields will only be rendered when the fieldset is expanded if this option is set true.
legendStyle	string	button	Field set legend style.
optionLabels	array		An array of string labels for items in the enum array
order	number		Allows for optional specification of the index of this field in the properties array.
readonly	boolean		Field will be readonly if true.
showMapOnLoad	boolean
showMessages	boolean	true	Display validation messages if true.
type	string	address	Field type.
validate	boolean	true	Field validation is required if true.
validateAddress	boolean	true	Enable address validation if true
view	string		Allows for this field to be rendered with a different view (such as 'display' or 'create')

Example 1

This example shows an address field that utilizes the Google Maps API to allow the end user to modify an address and view it on a map.

Result

Home Address

Street

City

State

Zip Code

Show Google Map

Source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#field1").alpaca({
    "schema": {
        "title": "Home Address",
        "type": "any"
    },
    "options": {
        "type": "address",
        "addressValidation": true,
        "showMapOnLoad": true
    },
    "data": {
        "street": ["308 Eddy Street", "Apartment #3"],
        "city": "Ithaca",
        "state": "NY",
        "zip": "14850"
    }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Run »Reset

Example 2

Address field rendered in display-only mode.

Result

Home Address

Street

308 Eddy Street

Apartment #3

City

Ithaca

State

NEW YORK

Zip Code

14850

Source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("#field2").alpaca({
    "data": {
        "street": ["308 Eddy Street", "Apartment #3"],
        "city": "Ithaca",
        "state": "NY",
        "zip": "14850"
    },
    "options": {
        "type": "address"
    },
    "schema": {
        "title": "Home Address",
        "type": "any"
    },
    "view": "bootstrap-display"
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Run »Reset