バリデーションシェイク

<form class="d04-02-07-form" novalidate>
          <div class="d04-02-07-row">
            <input type="text" placeholder="お名前" aria-label="お名前">
            <p class="d04-02-07-err">お名前を入力してください</p>
          </div>
          <button type="submit" class="d04-02-07-btn">送信する</button>
          <p class="d04-02-07-ok">送信ありがとうございました!</p>
        </form>

.d04-02-07-form{width:min(260px,100%);display:flex;flex-direction:column;gap:12px}
        .d04-02-07-row input{
          width:100%;padding:12px 14px;font-size:14px;background:#fff;
          border:2px solid #d5d9e0;border-radius:8px;outline:none;
          transition:border-color .25s;
        }
        .d04-02-07-row input:focus{border-color:#4a6cf7}
        .d04-02-07-form.is-error .d04-02-07-row input{
          border-color:#e5484d;
          animation:d04-02-07-shake .45s ease;
        }
        .d04-02-07-err{
          display:none;margin:6px 0 0;font-size:12px;color:#e5484d;
        }
        .d04-02-07-form.is-error .d04-02-07-err{display:block}
        .d04-02-07-btn{
          padding:12px;font-size:14px;font-weight:700;color:#fff;
          background:#4a6cf7;border:none;border-radius:8px;cursor:pointer;
          transition:background .25s;
        }
        .d04-02-07-btn:hover{background:#3a58d6}
        .d04-02-07-ok{
          display:none;margin:0;padding:10px;text-align:center;
          font-size:13px;font-weight:700;color:#1c7c4e;
          background:#e2f6ec;border-radius:8px;
        }
        .d04-02-07-form.is-success .d04-02-07-ok{display:block}
        @keyframes d04-02-07-shake{
          0%,100%{transform:translateX(0)}
          20%{transform:translateX(-8px)}
          40%{transform:translateX(8px)}
          60%{transform:translateX(-5px)}
          80%{transform:translateX(5px)}
        }

(function(){
        var form=document.querySelector('.d04-02-07-form');
        if(!form)return;
        var input=form.querySelector('input');
        form.addEventListener('submit',function(e){
          e.preventDefault();
          form.classList.remove('is-error','is-success');
          if(input.value.trim()===''){
            void form.offsetWidth; /* アニメ再発火 */
            form.classList.add('is-error');
          }else{
            form.classList.add('is-success');
          }
        });
        input.addEventListener('input',function(){
          form.classList.remove('is-error','is-success');
        });
      })();