Edit in JSFiddle

webshim.setOptions('forms', {
    //show custom styleable validation bubble
    replaceValidationUI: true,
    lazyCustomMessages: true
});

//start polyfilling
webshim.polyfill('forms');

.form-row .user-error {
    border-color: #c88;
}
.form-row .user-success {
    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;
}

<form action="#">
	<div class="form-row">
		<label for="email">email</label>
		<input data-errormessage-value-missing="Please enter your email adress." data-errormessage-type-mismatch="Your email is not correct." required="" type="email" id="email" />
	</div>
	<div class="form-row">
		<input type="submit" />
	</div>
</form>