turretcss

turretcss is not much different from many frameworks, but still, let's break down an example:

<form>
  <p class="field">
    <label>Name</label>
    <input type="text" name="name" value="" />
    <p class="form-message error"></p>
  </p>
  <p class="field">
    <label>Email</label>
    <input type="email" name="email" value="" />
    <p class="form-message error">[[+fi.error.email]]</p>
  </p>
  <p class="field">
    <button type="submit" class="button">Submit</button>
    <button type="reset" class="button">Reset</button>
  </p>
</form>

To prepare, you will need to do the following:

1. Add data-error="*" attributes for elements that will be displayed with the error text.
2. For FormIt compatibility, placeholders with values and errors must be specified.
3. In turretcss, invalid status is specified by the error class, so we specify it in the fetchit.frontend.input.invalid.class system setting.

INFO

Markup validators still swear by the empty action attribute, so you must specify a link to the page in it.

<form>
<form action="[[~[[*id]]]]" method="post">
  <p class="field">
    <label>Name</label>
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="[[+fi.name]]" />
    <p class="form-message error"></p>
    <p class="form-message error" data-error="name">[[+fi.error.name]]</p>
  </p>
  <p class="field">
    <label>Email</label>
    <input type="email" name="email" value="" />
    <input type="email" name="email" value="[[+fi.email]]" />
    <p class="form-message error"></p>
    <p class="form-message error" data-error="email">[[+fi.error.email]]</p>
  </p>
  <p class="field">
    <button type="submit" class="button">Submit</button>
    <button type="reset" class="button">Reset</button>
  </p>
</form>