Pico.css

With the Pico.css framework everything is much simpler, because the aria-invalid attribute controls the invalid state, and our extra adds it automatically. Let's look at a small example.

<form>
  <label>
    Name
    <input type="text" name="name">
  </label>
  <label>
    Email
    <input type="email" name="email">
  </label>
  <button type="submit">Submit</button>
</form>

To prepare, you will need to do the following:

1. Add text elements with attributes data-error="*" to be displayed with the error text.
2. For FormIt compatibility, placeholders with values and errors must be specified.

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]]]]">
  <label>
    Name
    <input type="text" name="name">
    <input type="text" name="name" value="[[+fi.name]]">
    <small data-error="name">[[+fi.error.name]]</small>
  </label>
  <label>
    Email
    <input type="email" name="email">
    <input type="email" name="email" value="[[+fi.email]]">
    <small data-error="email">[[+fi.error.email]]</small>
  </label>
  <button type="submit">Submit</button>
</form>