HTML5 Form Validation Example - http://jsfiddle.net/gh/gist/library/pure/a2a920d4c451915b3618/

fiddle.css

input {
  width: 10em;
}
input:invalid {
  box-shadow: 0 0 0.5em red;
}
input ~ [data-hint] {
  left: -5em;
}

fiddle.html

<form method="POST" action="/sample">
  <p><label>Name: <input type="text" required pattern="[a-z]+" minlength="3"><span class="hint--error hint--bottom hint--always" hidden></span></label></p>
  <p><label>Age: <input type="number"><span class="hint--error hint--bottom hint--always" hidden></span></label></p>
  <p><button>Submit</button></p>
</form>

fiddle.js

var inputs = document.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  input.addEventListener('input', function(event) {
    var el = event.target;
    if (el.checkValidity()) {
      el.nextElementSibling.style.display = 'none';
    }
  });
  input.addEventListener('invalid', function(event) {
    var el = event.target;
    el.nextElementSibling.dataset.hint = el.validationMessage;
    el.nextElementSibling.style.display = '';
  });
  input.checkValidity();
}

fiddle.manifest

name: HTML5 Form Validation Example
resources:
  - https://cdnjs.cloudflare.com/ajax/libs/hint.css/1.3.6/hint.min.css
normalize_css: no
wrap: d

http://jsfiddle.net/gh/gist/library/pure/a2a920d4c451915b3618/

See http://doc.jsfiddle.net/use/gist_read.html