controlling validationmessages through data-errormessage

by trixta

HTML

<script src="https://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<form action="#">
    <div class="form-row">
        <label for="name">Name</label>
        <input data-errormessage="Please enter your Name." required="" type="text" id="name" />
    </div>
    <div class="form-row">
        <label for="email">email</label>
        <input data-errormessage='{"valueMissing": "Please enter your email adress.", "typeMismatch": "Your email is not correct."}' required="" type="email" id="email" />
    </div>
    <div class="form-row">
        <input type="submit" />
    </div>
</form>

CSS

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;
}

JavaScript

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

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