Форма на Pico.css

С фреймворком Pico.css всё намного проще, т.к. состоянием невалидности управляет атрибут aria-invalid, а наш компонент его добавляет автоматически. Разберём небольшой пример.

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

Для подготовки нам всего лишь необходимо сделать следующее:

1. Добавить текстовые элементы с атрибутами data-error="*" которые будут отображены с текстом ошибки.
2. Для совместимости работы с FormIt нужно указать плейсхолдеры со значениями и ошибками.

Важно

Валидаторы разметки до сих пор ругаются на пустой атрибут action, поэтому в нём необходимо указывать ссылку на страницу.

<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>