anticore demo

fiddle.css

span.error {
  color: red;
  display: block;
}

fiddle.html

<form name="user" action="/gh/gist/response.html/3352f1e9abc25fce12d1bef36b07b690" method="post">
  <fieldset>
    <p>
      <label for="username">Username</label>
      <input id="username" placeholder="Lcf.vs" />
    </p>
    <p>
      <label for="country">Country</label>
      <select id="country">
        <option value="Belgium" selected="selected">Belgium</option>
        <option value="France">France</option>
        <option value="Other">Other</option>
      </select>
    </p>
  </fieldset>
  <button type="submit" class="save">Save</button>
</form>

fiddle.js

void function(global) {
  'use strict';
  
  var anticore = global.anticore;
  
  anticore.on('.error[data-for]', function(element, next) {
    let target = element.dataset.for;
    let field = document.querySelector(target);
    field.parentNode.insertBefore(element, field);

    next();
  });

  anticore.on('form', function(element, next) {
    element.addEventListener('submit', function(event) {
      anticore
        .fetcher(element)
        .credentials()
        .fetch(anticore.trigger);

      event.preventDefault();
    });

    next();
  });

  anticore.populate(document);
}(window);

fiddle.manifest

name: A simple anticore demo
description: A simple anticore demo
authors:
  - Lcf.vs
resources:
  - https://cdn.rawgit.com/Lcfvs/anticore/6bb745f67ce8fb20efd8d3cbd4e390c0fad4467c/anticore.min.js
normalize_css: no
wrap: d
panel_js: 0
panel_css: 0

fiddle.response.html

<span class="error" data-for="#username">Invalid username</span>
<span class="error" data-for="#country">Invalid country</span>