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