docs.modx.pro

Русский

English

Русский

English

Тема

На этой странице
  1. Компоненты
  2. FetchIt
  3. Разметка форм
  4. Форма на Pico.css

Форма на Pico.css ​

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

html
<form>
  <label>
    Name
    <input type="text" name="name">
  </label>
  <label>
    Email
    <input type="email" name="email">
  </label>
  <button type="submit">Submit</button>
</form>
<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, поэтому в нём необходимо указывать ссылку на страницу.

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