パーツ番号 04-11-02 ・ JavaScript使用

メール形式判定チェックマーク入力欄

入力しながらメールアドレスの形式を判定し、正しい形式になった瞬間にチェックマークがふわっと現れる入力欄。Contact Form 7のメールアドレス欄に組み込むと入力ミスの早期発見につながります。

jsinput

プレビュー

ソースコード

HTML

<div class="d04-11-02-field">
          <input type="email" class="d04-11-02-input" placeholder="メールアドレス" aria-label="メールアドレス">
          <svg class="d04-11-02-check" viewBox="0 0 24 24" aria-hidden="true">
            <polyline points="4.5 12.5 10 18 19.5 6.5" fill="none" stroke="#22b573" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>

CSS

.d04-11-02-field{position:relative;width:min(280px,100%)}
        .d04-11-02-input{width:100%;padding:12px 40px 12px 14px;font-size:14px;border:2px solid #d5d9e0;border-radius:8px;outline:none;transition:border-color .25s;background:#fff}
        .d04-11-02-input:focus{border-color:#4a6cf7}
        .d04-11-02-input.is-valid{border-color:#22b573}
        .d04-11-02-check{position:absolute;right:12px;top:50%;transform:translateY(-50%) scale(.5);width:20px;height:20px;opacity:0;transition:opacity .25s,transform .25s}
        .d04-11-02-check polyline{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s ease}
        .d04-11-02-input.is-valid ~ .d04-11-02-check{opacity:1;transform:translateY(-50%) scale(1)}
        .d04-11-02-input.is-valid ~ .d04-11-02-check polyline{stroke-dashoffset:0}

JavaScript

(function(){
        var input=document.querySelector('.d04-11-02-input');
        if(!input)return;
        var re=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        input.addEventListener('input',function(){
          input.classList.toggle('is-valid',re.test(input.value));
        });
      })();

クラス名 .d04-11-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。