spz-form

When the form has is="spz-form" or action-xhr attribute, it will be recognized as SPZ form. Otherwise, it is a native form.

The URL that processes the form submission. Such as form action.

initial-xhr="<URL | API>"

If it is configured, the form initial data will be obtained from the given value.

The HTTP method to submit the form with. The only allowed methods/values are (case insensitive):

• GET default
• POST
• DELETE
• PATCH

Specifies how to validate the form. It has the following values:

• show-all-on-submit: Displays all invalid verification information when the user clicks the submit button. When the current input has input, the corresponding verification information will be hidden.
• show-first-on-submit: Displays the first invalid verification information when the user clicks the submit button. When the current input has input, the corresponding verification information will be hidden.
• input-interact-and-submit: Displays any invalid verification information when the user is typing or clicking the submit button. When the current input has input, the corresponding verification information will be hidden.
• change-interact-and-submit: Displays all invalid verification information when the user completes the input or clicks the submit button. When the current input has change, the corresponding verification information will be hidden.
• change-interact-and-first-submit: Displays the first invalid verification information when the user completes the input or clicks the submit button. When the current input has change, the corresponding verification information will be hidden.

The browser displays a dialog with the given message before executing submit. If the user clicks to confirm, execute submit.

<form
  id="addresses-delete-form"
  is="spz-form"
  method="DELETE"
  confirm-before-submit="Are you sure you wish to delete this address?"
  @submitSuccess="..."
  @submitError="..."
></form>

<button
  type="button"
  @tap="addresses-delete-form.submit(actionXhr='/api/customers/addresses/${data.id}')"
>
  Delete
</button>

If this attribute is present, record the URI of the page that is linked to this page.

If this attribute is present, return to the recorded page or / when the submit succeeds.

What is the recorded page?

• If the record-referrer is specified, it will return to the URI of the page that is linked to this page.
• If the record-referrer is not specified, it will return to the document.referrer.
• Otherwise, it will return to /.

Specifies a URL or path to redirect when the submit succeeds.

Refresh the current page when the submit succeeds.

Specify the text to be prompted when the submit fails.

Get the data from a path in the given data object.

In the following code, if the items value is "address" that will return data.address array.

If the items value is "." that will return data object.

confirm-for="#ElementID"

Specify an element id to check whether it is the same as its own value.

<input
  id="password"
  name="password"
  type="password"
  minlength="6"
  maxlength="16"
  pattern="[\s\S]{6,16}"
  required
  @input-throttled="..."
>

<input
  id="confirm-password"
  name="confirm_password"
  confirm-for="#password"
  type="password"
  minlength="6"
  maxlength="16"
  autocomplete="new-confirm-password"
  pattern="[\s\S]{6,16}"
  required
  @input-throttled="..."
>

If this attribute is present, it indicates that an element should be focused on page load. Only one element per form can have this attribute.

When the verification status of the input specified by validation-for and the value specified by visible-when-invalid is true, the verification information is visible. The validation information element has the hidden attribute by default.

Specifies the DOM id of a validation element.

Specifies the validation pattern. ValidityState

<input
  id="email"
  type="text"
  name="email"
  tabindex="1"
  autofocus
  required
  pattern="[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?"
  @input-debounced="..."
>

<span
  validation-for="email"
  visible-when-invalid="valueMissing"
  hidden
>
  Email is required.
</span>

submit([actionXhr=<URL | API>])

To manually submit the form. It can pass a parameter actionXhr to modify the action-xhr of the form at a time.

<spz-list
  id="addresses-list"
  layout="container"
  src="/api/customers/addresses?per_page=40"
  ...
>
  <template>
    <div>
      <!-- ... -->
      <button
        type="button"
        @tap="addresses-delete-form.submit(actionXhr='/api/customers/addresses/${data.id}');"
      >
        Delete
      </button>
      <!-- ... -->
    </div>
  </template>
</spz-list>

<form
  id="addresses-delete-form"
  is="spz-form"
  confirm-before-submit="Are you sure you wish to delete this address?"
  method="DELETE"
  @submitSuccess="addresses-list.refresh();"
  @submitError="..."
></form>

To reset all inputs in the form to their initial values. No parameter required.

insert(name=<ElementName>, value=<String | Boolean | Number>)

Modify the value of the element with the specified name in the form.

<form id="form" action-xhr="/search" method="GET">
  <input id="email" type="text" name="email">
  <input type="submit" value="Submit">

  <button type="button" @tap="form.insert(name='email', value='[email protected]');">Insert the email</button>
</form>

init(initialXhr=<URL | API>[, actionXhr=<URL | API>])

To request data to initialize the form data. The value of the key of the object of the requested data is assigned to the element corresponding to the name in the form. The initialXhr and actionXhr parameters will be assigned to the initial-xhr and action-xhr attributes of the form.

No parameter required. To manually set the form focus. It will find the first element in the form with the autofocus attribute to focus.

To trigger form validation manually. No parameter required.

Be automatically triggered when the submit succeeds.

Be automatically triggered when the submit fails.