JSFiddle - React, Tailwind, and code Playground

HTML

<input data-pattern="офгнспшжэ" id="pink" type="text">

CSS

.error {
    outline: 3px solid red;
}

JavaScript

(function() {
    var elem = document.getElementById('pink'),
        pattern = elem.dataset.pattern,
        removeBorder = function() {
            elem.classList.remove('error');            
        },
        value = '';
    elem.addEventListener('input', function(e) {
        if(!new RegExp('^' + this.value).test(pattern)) {
            this.classList.add('error');
            setTimeout(removeBorder, 100);
            this.value = value;
        }
        else value = this.value;
    });
})();