インラインバリデーション表示

<form class="d09-02-04-form" novalidate>
          <label class="d09-02-04-label">メールアドレス</label>
          <input class="d09-02-04-input" type="text" placeholder="you@example.com" autocomplete="off">
          <div class="d09-02-04-msg"></div>
          <button class="d09-02-04-submit" type="button">確認</button>
        </form>

.d09-02-04{align-items:flex-start}
        .d09-02-04-form{display:flex;flex-direction:column;gap:8px;width:100%;max-width:300px}
        .d09-02-04-label{font-size:12px;color:#555;font-weight:600}
        .d09-02-04-input{padding:10px 12px;border:2px solid #d5d9e0;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s}
        .d09-02-04-input.d09-02-04-ok{border-color:#2fa85e}
        .d09-02-04-input.d09-02-04-ng{border-color:#e05252}
        .d09-02-04-msg{display:flex;align-items:center;gap:6px;font-size:12px;min-height:18px;max-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);transition:all .3s}
        .d09-02-04-msg.d09-02-04-shown{max-height:24px;opacity:1;transform:none}
        .d09-02-04-msg svg{width:15px;height:15px;flex:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none}
        .d09-02-04-msg.d09-02-04-good{color:#1e7a42}.d09-02-04-msg.d09-02-04-good svg{stroke:#2fa85e}
        .d09-02-04-msg.d09-02-04-bad{color:#b03232}.d09-02-04-msg.d09-02-04-bad svg{stroke:#e05252}
        .d09-02-04-submit{margin-top:2px;padding:9px 16px;border:none;border-radius:8px;background:#1f2430;color:#fff;font-size:13px;font-weight:600;cursor:pointer}

(function(){
        var root=document.getElementById('item-09-02-04');
        var input=root.querySelector('.d09-02-04-input');
        var msg=root.querySelector('.d09-02-04-msg');
        var re=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        function validate(){
          var v=input.value.trim();
          if(v===''){msg.classList.remove('d09-02-04-shown');input.classList.remove('d09-02-04-ok','d09-02-04-ng');return;}
          if(re.test(v)){
            input.classList.add('d09-02-04-ok');input.classList.remove('d09-02-04-ng');
            msg.className='d09-02-04-msg d09-02-04-good d09-02-04-shown';
            msg.innerHTML='<svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-11"/></svg>有効なメールアドレスです';
          }else{
            input.classList.add('d09-02-04-ng');input.classList.remove('d09-02-04-ok');
            msg.className='d09-02-04-msg d09-02-04-bad d09-02-04-shown';
            msg.innerHTML='<svg viewBox="0 0 24 24"><path d="M12 6v8"/><circle cx="12" cy="18" r="1" fill="#e05252" stroke="none"/></svg>形式が正しくありません';
          }
        }
        input.addEventListener('input',validate);
        root.querySelector('.d09-02-04-submit').addEventListener('click',validate);
      })();