up.form up.form.config
Configuration object

Sets default options for form submission and validation.


Submittable forms

[config.submitSelectors]
optional

An array of CSS selectors matching forms that will be submitted through Unpoly.

You can configure Unpoly to handle all forms on a page without requiring an [up-submit] attribute:

up.form.config.submitSelectors.push('form')

Individual forms may opt out with an [up-submit=false] attribute. You may configure additional exceptions in config.noSubmitSelectors.

Type: Array<string>
[config.noSubmitSelectors]
optional

Exceptions to up.form.config.submitSelectors.

Matching forms will not be submitted through Unpoly, even if they match up.form.config.submitSelectors.

Type: Array<string>

Form elements

[config.groupSelectors=['[up-form-group]', 'fieldset', 'label', 'form']]
optional

An array of CSS selectors matching a form group.

When validating a field, Unpoly will re-render the closest form group around that field.

When a group is matched, Unpoly will derive a target selector for the element. In the example below, changing the City field would validate the target #city_group:

<fieldset id="city_group">
  <label for="city">City</label>
  <input type="text" name="city" id="city" up-validate>
</fieldset>

If no good selector can be derived from the group element, the resulting target will use a :has() suffix that matches the changed field. In the example below the target would be fieldset:has(#city):

<fieldset> <!-- no [id] attribute to derive a selector from -->
  <label for="city">City</label>
  <input type="text" name="city" id="city" up-validate>
</fieldset>
Type: Array<string>
[config.fieldSelectors]
optional

An array of CSS selectors that represent form fields, such as input or select.

Form-associated custom elements are matched by default and need not be added.

Add a selector to register any element as a field. Matching elements must have a value property.

You may configure exceptions in config.noFieldSelectors.

Type: Array<string>
[config.noFieldSelectors]
optional

Exceptions to up.form.config.fieldSelectors.

Matching elements will not be considered a form field, even if they match up.form.config.fieldSelectors.

For example, a form-associated custom element that renders a button should not count as a field:

up.form.config.noFieldSelectors.push('my-submit-button')
Type: Array<string>
[config.submitButtonSelectors]
optional

An array of CSS selectors that represent submit buttons, such as input[type=submit] or button[type=submit].

Selectors must only match native submit buttons: a <button> without a [type] or with [type=submit], an <input type="submit"> or an <input type="image">. A browser cannot submit a form through other elements, and FormData rejects them.

Type: Array<string>
[config.anyButtonSelectors]
optional

An array of CSS selectors that represent buttons of any kind, such as button or input[type=button].

Unpoly uses this to disable a form's buttons while the form is submitting. To find the button that submits a form, see config.submitButtonSelectors.

Type: Array<string>
[config.arrayParam]
optional

Whether a param name is treated as an array with multiple values.

By default, only field names ending in "[]" are treated as arrays. You can configure another function that accepts a param name and returns a boolean.

If set to true then all fields are handled as arrays and functions like up.watch() always get the value passed as an array.

Type: Function(string): boolean | boolean

Watching fields

[config.watchInputDelay=0]
optional

The number of milliseconds to wait before running a watcher callback.

This default delay is only applied when watching the input event. There is no default delay when watching other types of events.

Type: number
[config.watchInputEvents=['input', 'change']]
optional

An array of events to substitute if watching the input event.

This can be used to watch misbehaving fields that don't emit the standard input event as its value is being edited.

It's OK to name multiple events that may result in the same change (e.g. ['keydown', 'keyup']). Unpoly guarantees the callback is only run once per changed value.

Instead of configuring an array of event types, you may also set a function that accepts a form field and returns an array of event types to watch for that field.

Type: Array<string> | Function(Element): Array<string>
[config.watchChangeEvents=['change']]
optional

An array of events to substitute if watching the change event.

This can be used to watch misbehaving fields that don't emit the standard change event after its value was changed.

It's OK to name multiple events that may result in the same change (e.g. ['change', 'blur']). Unpoly guarantees the callback is only run once per changed value.

Instead of configuring an array of event types, you may also set a function that accepts a form field and returns an array of event types to watch for that field.

Type: Array<string> | Function(Element): Array<string>

Validation

[config.validateBatch=true]
optional

Whether to batch validations.

Type: boolean