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を設定して想定していた動きになるようQueryで実装。

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('✗'); } } }); });

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。