[JavaScript]HTML5 Form Validationの制御と注意事項 ref: http://qiita.com/leedohyung-dba/items/b762e21018edc4d0387c

bug_ex_1.js

const VALID_MESSAGE_REQUIRED = "入力してくださいね-!✋";
const VALID_MESSAGE_PATTERN = "正しい構文で入力してくださいね-!✋";
const VALID_MESSAGE_TYPE = "指定されている形式で入力してくださいね-!✋";

$("input").each(function(index, elem) {
    elem.addEventListener("invalid", function(e) {
        if(elem.validity.valueMissing){
            //要素が入力必須のフィールドであるのに値がない場合
            e.target.setCustomValidity(VALID_MESSAGE_REQUIRED);
        } else if(elem.validity.typeMismatch) {
            //要素の値が正しい構文ではない場合
            e.target.setCustomValidity(VALID_MESSAGE_TYPE);
        } else if (elem.validity.patternMismath) {
            //要素の値が与えられたパターンにマッチしない場合
            e.target.setCustomValidity(VALID_MESSAGE_PATTERN);
        } else {
            e.target.setCustomValidity("");
        }
    });
});

bug_ex_2.js

const VALID_MESSAGE_REQUIRED = "入力してくださいね-!✋";
const VALID_MESSAGE_PATTERN = "正しい構文で入力してくださいね-!✋";
const VALID_MESSAGE_TYPE = "指定されている形式で入力してくださいね-!✋";

$("input").each(function(index, elem) {
    elem.addEventListener("keyup", function (event) {
        if(elem.validity.valueMissing){
            elem.setCustomValidity(VALID_MESSAGE_REQUIRED);
        } else if(elem.validity.typeMismatch) {
            elem.setCustomValidity(VALID_MESSAGE_TYPE);
        } else {
            elem.setCustomValidity("");
        }
    });
});

success_ex_3.js

const VALID_MESSAGE_REQUIRED = "入力してくださいね-!✋";
const VALID_MESSAGE_PATTERN = "正しい構文で入力してくださいね-!✋";
const VALID_MESSAGE_TYPE = "指定されている形式で入力してくださいね-!✋";

$("input").each(function(index, elem) {
    if(elem.validity.valueMissing){
        elem.setCustomValidity(VALID_MESSAGE_REQUIRED);
    }
    elem.addEventListener("keyup", function (event) {
        if(elem.validity.valueMissing){
            elem.setCustomValidity(VALID_MESSAGE_REQUIRED);
        } else if(elem.validity.typeMismatch) {
            elem.setCustomValidity(VALID_MESSAGE_TYPE);
        } else {
            elem.setCustomValidity("");
        }
    });
});