Bootstrap form

Example markup for Bootstrap:

<form class="row g-3">
  <div class="col-md-4">
    <label for="name" class="form-label">First name</label>
    <input type="text" class="form-control" id="name" value="">
    <div class="invalid-feedback"></div>
  </div>
  <div class="col-md-4">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" value="">
    <div class="invalid-feedback"></div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

Steps:

1. Add data-error for field error text.
2. Add [data-success] and [data-validation-error] for form messages on AJAX.
3. Add FormIt placeholders for values and errors after a normal POST.
4. is-invalid is already the default in fetchit.frontend.input.invalid.class.

Информация

Set action to the page URL. Markup validators flag an empty action.

modx

<form class="row g-3"> 
<form action="[[~[[*id]]]]" method="post" class="row g-3"> 
  <div class="col-md-4">
    <label for="name" class="form-label">First name</label>
    <input type="text" class="form-control" id="name" name="name" value=""> 
    <input type="text" class="form-control" id="name" name="name" value="[[+fi.name]]"> 
    <div class="invalid-feedback"></div> 
    <div class="invalid-feedback" data-error="name">[[+fi.error.name]]</div> 
  </div>
  <div class="col-md-4">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" name="email" value=""> 
    <input type="email" class="form-control" id="email" name="email" value="[[+fi.email]]"> 
    <div class="invalid-feedback"></div> 
    <div class="invalid-feedback" data-error="email">[[+fi.error.email]]</div> 
  </div>
  <div class="col-12"> 
    <div class="alert alert-success" role="alert" data-success style="display: none;"></div> 
    <div class="alert alert-danger" role="alert" data-validation-error style="display: none;"></div> 
  </div> 
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

fenom

<form class="row g-3"> 
<form action="{$_modx->resource.id | url}" method="post" class="row g-3"> 
  <div class="col-md-4">
    <label for="name" class="form-label">First name</label>
    <input type="text" class="form-control" id="name" name="name" value=""> 
    <input type="text" class="form-control" id="name" name="name" value="{$_modx->getPlaceholder('fi.name')}"> 
    <div class="invalid-feedback"></div> 
    <div class="invalid-feedback" data-error="name">{$_modx->getPlaceholder('fi.error.name')}</div> 
  </div>
  <div class="col-md-4">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" name="email" value=""> 
    <input type="email" class="form-control" id="email" name="email" value="{$_modx->getPlaceholder('fi.email')}"> 
    <div class="invalid-feedback"></div> 
    <div class="invalid-feedback" data-error="email">{$_modx->getPlaceholder('fi.error.email')}</div> 
  </div>
  <div class="col-12"> 
    <div class="alert alert-success" role="alert" data-success style="display: none;"></div> 
    <div class="alert alert-danger" role="alert" data-validation-error style="display: none;"></div> 
  </div> 
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>