Fomantic-UI

The example with the CSS framework Fomantic-UI is more interesting, because the CSS invalid class should be added to the parent element, not the input field. There is a frontend.custom.invalid.class setting just for such cases:

<form class="ui form">
  <div class="field">
    <label>Name</label>
    <input type="text" name="name">
    <span class="ui error text"></span>
  </div>
  <div class="field">
    <label>Email</label>
    <input type="text" name="email">
    <span class="ui error text"></span>
  </div>
  <button class="ui button" type="submit">Submit</button>
  <button class="ui button" type="reset">Reset</button>
</form>

To prepare, you will need to do the following:

1. Add data-custom="*" attributes for parent elements and specifying the error value in the fetchit.frontend.custom.invalid.class system setting.
2. Add data-error="*" attributes for elements that will be displayed with the error text.
3. 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.

Changes

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

Finished markup

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