Validation Shake

<!-- Validation Shake · Bron: Animista · licentie FreeBSD. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<form class="vsi-wrap"><input class="vsi-input" type="text" placeholder="Voer minstens 4 tekens in"><button class="vsi-btn" type="submit">Bevestig</button><span class="vsi-msg"></span></form>
</div>

/* Validation Shake · Bron: Animista · licentie FreeBSD. Laat deze vermelding staan bij hergebruik. */
.vsi-wrap{display:flex;flex-direction:column;gap:10px;width:300px;font-family:'Switzer',sans-serif}
.vsi-input{padding:12px 14px;font-size:15px;color:#0a0a0a;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:10px;outline:none;transition:border-color .2s,box-shadow .2s}
.vsi-input:focus{border-color:#0a0a0a}
.vsi-input.vsi-err{border-color:#e23;box-shadow:0 0 0 3px rgba(238,34,51,.12);animation:vsi-shake .4s}
.vsi-input.vsi-ok{border-color:#1f9d55;box-shadow:0 0 0 3px rgba(31,157,85,.12)}
@keyframes vsi-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.vsi-btn{padding:11px;border:none;border-radius:10px;background:#F5480F;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s}
.vsi-btn:hover{opacity:.9}
.vsi-msg{font-size:13px;min-height:16px}.vsi-msg.err{color:#e23}.vsi-msg.ok{color:#1f9d55}

// Validation Shake · Bron: Animista · licentie FreeBSD. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.vsi-wrap')||root;var inp=root.querySelector('.vsi-input'),msg=root.querySelector('.vsi-msg');root.addEventListener('submit',function(e){e.preventDefault();inp.classList.remove('vsi-err','vsi-ok');msg.classList.remove('err','ok');if(inp.value.trim().length<4){void inp.offsetWidth;inp.classList.add('vsi-err');msg.textContent='Minimaal 4 tekens vereist';msg.classList.add('err');}else{inp.classList.add('vsi-ok');msg.textContent='Ziet er goed uit!';msg.classList.add('ok');}});
}
init(document.querySelector('.jouw-container'));