Edit this page

up.form up.form.config
JavaScript property

Sets default options for form submission and validation.


Value

[config.submitSelectors] Array<string> 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.

[config.noSubmitSelectors] Array<string> optional

Exceptions to up.form.config.submitSelectors.

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

[config.groupSelectors=['[up-form-group]', 'fieldset', 'label', 'form']] Array<string> 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 cannot 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>
[config.fieldSelectors] string optional

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

When you add custom JavaScript controls to this list, matching elements should respond to the properties { name, value, disabled }.

[config.submitButtonSelectors] string optional

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

[config.watchInputDelay=0] number 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.

[config.watchInputEvents=['input', 'change']] Array<string>orFunction(Element): Array<string> 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.

[config.watchChangeEvents=['change']] Array<string>orFunction(Element): Array<string> 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.