spz-form#

#When to use

• For collecting information.
• When it is necessary to validate input data.

#How does the component determine if a form is an spz-form?

The form is used in the same way as a native form, using the <form> tag rather than the <spz-form> tag. The component will determine whether to treat the current form as an spz-form based on whether the <form> tag has one of the following two identifiers:

• With is="spz-form" attribute
• With action-xhr attribute

#Code demonstration

#Basic usage

The most basic usage is consistent with the native form in the use of controls within the form.

<form
    action-xhr="/api/customers/sign_in"
    method="POST"
    custom-validation="change-interact-and-first-submit"
    back-to-referrer
    record-referrer
    @submitError="..."
  >
    <div class='form_item'>
      <input
        id="email"
        type="text"
        name="email"
        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])?"
      >
      <label for="email">Email</label>
    </div>
    <div class='form_item'>
      <input
        id="password"
        type="password"
        name="password"
        required
        minlength="6"
        maxlength="16"
        pattern='[\s\S]{6,16}'
      >
      <label for="password">Password</label>
    </div>

    <button type="submit">Login</button>
  </form>

#Error message

Displaying error messages. When the form is reported to have an error, it will find elements with validation-for and visible-when-invalid attributes, and if the value of validation-for matches the control's ID and the value of visible-when-invalid matches the invalid validation state, it will remove the hidden attribute from the current element and add a visible class.

Validation states

<form
  action-xhr="/api/customers/sign_in"
  method="POST"
  custom-validation="change-interact-and-first-submit"
  back-to-referrer
  record-referrer
  @submitError="..."
>
  <div class='form_item'>
    <input
      id="email"
      type="text"
      name="email"
      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])?"
    >
    <label for="email">Email</label>

    <div validation-for="email" visible-when-invalid="valueMissing" hidden>Email is required</div>
    <div validation-for="email" visible-when-invalid="patternMismatch" hidden>Please enter a valid email.</div>
  </div>
  <div class='form_item'>
    <input
      id="password"
      type="password"
      name="password"
      required
      minlength="6"
      maxlength="16"
      pattern='[\s\S]{6,16}'
    >
    <label for="password">Password</label>
    <div validation-for="password" visible-when-invalid="valueMissing" hidden>Password is required.</div>
    <div validation-for="password" visible-when-invalid="patternMismatch" hidden>Password must be between 6-16 characters long.</div>
  </div>

 

 <button type="submit">Login</button>
</form>

#Attributes

#initial-xhr supported types

#custom-validation optional values

show-all-on-submit

Before requesting the interface after clicking the submit form button, all controls' values will be validated for effectiveness. If there are validations that do not match, report all non-conforming validation information. After the control's value validation does not match, when the user inputs/selects a matching value, the control will be reported as effective.

show-first-on-submit

Before requesting the interface after clicking the submit form button, all controls' values will be validated for effectiveness. If there are validations that do not match, report the first non-conforming validation information. After the control's value validation does not match, when the user inputs/selects a matching value, the control will be reported as effective.

input-interact-and-submit

• When the user is typing, the current control's value will be validated in real-time for effectiveness. If not valid, report the non-conforming validation information in real-time.
• Before requesting the interface after clicking the submit form button, all controls' values will be validated for effectiveness. If there are validations that do not match, report all non-conforming validation information.

change-interact-and-submit

• After the user has finished inputting, validate the current control's value for effectiveness. If not valid, report the non-conforming validation information.
• Before requesting the interface after clicking the submit form button, all controls' values will be validated for effectiveness. If there are validations that do not match, report all non-conforming validation information.

change-interact-and-first-submit

• After the user has finished inputting, validate the current control's value for effectiveness. If

#AI Summary (LLM Ready)

• Component ID: spz-form
• One-line purpose: Form component, includes data entry and validation.
• Detected attribute rows: 20
• Detected method subsections: 0
• Detected event subsections: 0
• Top attribute names: action-xhr, initial-xhr, items, method, custom-validation, confirm-before-submit
• Top method names: none (needs manual completion)
• Top event names: none (needs manual completion)
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/