jQueryでinput:invalid:after
inputでvalid/invalidに:after擬似要素を再現
inputに:afterを設定したら反映されなかったので調べてみると、
inputを含む空要素（area、base、basefont、br、col、frame、hr、img、input、isindex、link、meta、param）、主に終了タグが不要な要素全般には擬似要素を設定できないことが判明。
:afterを設定して想定していた動きになるようjQueryで実装。
jQuery
$(function () {
$('input').after('<span class="validate_mark"></span>');
$('input').focusout(function() {
$(this).next('span').html('');
if ($(this).val()) {
// 無効
if ($(this).is(':invalid')) {
$(this).next('span').html('✗');
// 有効
} else if ($(this).is(':valid')) {
$(this).next('span').html('✓');
}
} else {
// 必須
if ($(this).is(':required')) {
$(this).next('span').html('✗');
}
}
});
});
サンプル
