Selectors

Attributes the client script uses to find the form, fields, and message blocks.

data-fetchit

The snippet looks for a <form> in the chunk and, if the attribute is missing, adds data-fetchit itself. Only forms with this marker are handled.

<form action="[[~[[*id]]]]" method="post" data-fetchit="…">
  …
</form>

The attribute value is internal (action id). Do not change it by hand.

The snippet also forces method="post". Both attributes come last in the form tag.

Right after the form tag the snippet adds the hidden fields of the spam protection. There is nothing to output and nothing to account for in the markup.

data-error

Container for field error text. The value matches the field name.

<input type="text" name="username">
<span data-error="username"></span>

For names like name[], both data-error="name" and data-error="name[]" work. The script looks for both.

Error text goes into textContent after HTML is stripped. Empty and whitespace-only messages are ignored.

data-custom

The class from fetchit.frontend.custom.invalid.class is applied not to the input, but to an element with data-custom="field_name" (often a wrapper).

<div class="input-parent" data-custom="password">
  <input type="password" name="password">
</div>

data-success and data-validation-error

Form-level messages (not field errors). AJAX fills them via setFormMessage():

Attribute	When it shows
data-success	response with success: true, text from message
data-validation-error	response with success: false, text from message

FormIt placeholders like [[+fi.successMessage]] work on a normal POST with reload. For AJAX you need these attributes, or form-level success/error text will not appear on the client.

Example from the package chunk:

modx

<div role="alert" data-success
      style="display: [[+fi.success:is=`1`:then=``:else=`none`]];">
  [[+fi.successMessage]]
</div>
<div role="alert" data-validation-error
      style="display: [[+fi.validation_error:is=`1`:then=``:else=`none`]];">
  [[+fi.validation_error_message]]
</div>

fenom

<div role="alert" data-success
      style="display: {if $_modx->getPlaceholder('fi.success') == 1}{else}none{/if};">
  {$_modx->getPlaceholder('fi.successMessage')}
</div>
<div role="alert" data-validation-error
      style="display: {if $_modx->getPlaceholder('fi.validation_error') == 1}{else}none{/if};">
  {$_modx->getPlaceholder('fi.validation_error_message')}
</div>

Both blocks clear before a new submit. With clearFieldsOnSuccess and form reset, success messages can be kept (the script sets a flag for the duration of reset).