JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<form action="#">

        <label for="numbers" >Numbers:</label>
    <input type="text" class='numbers' id='numbers' data-validator='^([0-9]*)$'/>
</form>

CSS

.error {
    outline:RGBA(255,0,0,.4) 4px groove;
    
}
.error:after{
    content : "not valid";
}
numbers{
    line-height:1em;
    
}

JavaScript

[].slice.call(document.querySelectorAll('[data-validator]')).forEach(function (e) {
    e.addEventListener('input', function () {
        if (typeof this.regexp == 'undefined' || this.regexp.source.toString() !== this.dataset['validator'].replace('\\', '\\\\')) {

            this.regexp = new RegExp(this.dataset['validator'].replace('\\', '\\\\'), 'gi');
        }
        console.log(this.regexp.source, this.value, this.regexp.test(this.value));
        if (!this.regexp.test(this.value)) {
            [].slice.call(document.querySelectorAll('.' + e.id)).forEach(function (b) {

                return b.classList.contains('error') ? false : b.classList.add('error');
            });
        }
        if (this.regexp.test(this.value)) {
            [].slice.call(document.querySelectorAll('.' + e.id)).forEach(function (b) {

                return b.classList.contains('error') ? b.classList.toggle('error') : false;
            });
        }
    }.bind(e));
});
function PrintRules() {
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules
        for(var x=0;x<rules.length;x++) {
            console.log(rules[x].selectorText);
        }
    }
PrintRules('numbers');