Vanilla

In the Vanilla framework as well as in Fomantic UI we need to add the invalidation class to the parent element, but this is not a problem, we can use the data-custom="*" selectors and add them. Another thing to consider is that as part of the framework rules, validatable input fields must be wrapped in an element with the p-form-validation class:

<form>
  <div class="p-form-validation">
    <label>Name</label>
    <input class="p-form-validation__input" type="text" name="name" value="">
    <p class="p-form-validation__message"></p>
  </div>
  <div class="p-form-validation" data-custom="email">
    <label>Email</label>
    <input class="p-form-validation__input" type="email" name="email" value="">
    <p class="p-form-validation__message"></p>
  </div>
  <button type="submit" class="p-button--positive">Submit</button>
  <button type="reset" class="p-button">Reset</button>
</form>

To prepare, you will need to do the following:

1. Add data-custom="*" attributes for parent elements and specifying the is-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.

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