Edit in JSFiddle

<!-- simply add .ws-validate to your form and you get nice inline form validation -->
<form action="#" class="ws-validate">
	<div class="form-row">
		<label for="email">email with one message</label>
		<input required="" type="email" id="email" pattern=".+\.[a-zA-Z]{2,}" />
		<!-- define one errormessage -->
		<div class="ws-errorbox" hidden="">
			<p>Please enter your email.</p>
    <div class="form-row">
		<label for="email2">email with two messages</label>
		<input required="" type="email" pattern=".+\.[a-zA-Z]{2,}" id="email2" />
		<!-- define errormessage -->
		<div class="ws-errorbox" hidden="">
			<!-- define one errormessage for the valueMissing errortype -->
            <p data-errortype="valueMissing">Please enter your email.</p>
            <!-- and one other for all other errotypes (i.e. typeMismatch and patternMismatch) -->
			<p>This is not a valid email.</p>
	<div class="form-row">
		<input type="submit" />
webshim.setOptions('forms', {
    lazyCustomMessages: true

//start polyfilling
div.ws-invalid input {
    border-color: #c88;
.ws-invalid label {
    color: #933;
div.ws-success input {
    border-color: #8c8;

form {
    margin: 10px auto;
    max-width: 400px;
    min-width: 220px;
.form-row {
    padding: 5px 10px;
label {
    display: block;
    margin: 3px 0;
.form-row input {
    width: 220px;
    padding: 3px 1px;
    border: 1px solid #ccc;
    box-shadow: none;