HTML5 form required attribute. Set custom validation message?

Question

I\'ve got the following HTML5 form: http://jsfiddle.net/nfgfP/

Answer 1

I have a simpler vanilla js only solution:

For checkboxes:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.checked ? '' : 'My message');
};

For inputs:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.value ? '' : 'My message');
};