JSFiddle - React, Tailwind, and code Playground

by danya_postfactum

HTML

<!-- <script src="addEventListener.js"></script>
<script src="classList.js"></script> -->
<form action="">
    <p><input type="text" name="name" required="" pattern="[a-zA-Z]{2,64}" title="Разрешены символы латинского алфавита. От 2 до 64" placeholder="Имя" /></p>
    <p><input type="email" name="email" required="" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+" placeholder="Email" /></p>
    <p><input type="password" name="password" required="" pattern=".{2,64}" placeholder="Пароль" /></p>
    <p><input type="password" name="passwordConfirm" required="" placeholder="Пароль еще раз" /></p>
    <p><button type="submit">Отправить</button></p>
</form>
<script>
    var form = document.querySelector('form');
    var validator = new FormValidator(form, {
       'passwordConfirm': function(input) {
           return input.value == input.form.password.value;
       }
    });
</script>

CSS

input{
        border: 1px solid #777;
    }
    input:focus{
        outline: none;
        box-shadow: 0 0 5px rgb(179, 179, 179);
    }
    .state-error{
        border-color: red;
    }
    .state-success{
        border-color: green;
    }

JavaScript

function FormValidator(form, rules) {
        form.noValidate = true;
        var events = ['submit', 'input'];
        if (!('oninput' in form))
            events = ['submit', 'keydown', 'paste', 'cut', 'drop', 'dragend'];
        for (var i = 0; i < events.length; i++)
            form.addEventListener(events[i], this);
        this.form = form;
        this.rules = rules;
    }
    FormValidator.prototype = {
        constructor: FormValidator,
        handleEvent: function(event) {
            switch (event.type) {
                case 'input':
                    this.validateInput(event.target);
                    break;
                case 'submit':
                    if (!this.validateInputs(this.getInputs()))
                        event.preventDefault();
                    break;
                default:
                    var target = event.target;
                    var self = this;
                    setTimeout(function(){
                        self.validateInput(target);
                    }, 0);
            }
        },
        getInputs: function() {
            var inputTags = {
                textarea: 1,
                input: 1,
                select: 1
            };
            var noValidateTypes = {
                hidden: 1,
                image: 1,
                button: 1,
                reset: 1,
                submit: 1
            };
            var elements = this.form.elements;
            var inputs = [];
            for (var i = 0; i < elements.length; i++) {
                var element = elements[i];
                var tagName = element.tagName.toLowerCase();
                var type = element.type;
                if (tagName in inputTags && !(type in noValidateTypes) && !element.disabled && !element.readOnly) {
                    inputs.push(element);
                }
            }
            return inputs;
        },
        validateInput: function(input) {
            var rule = this.rules[input.name];
...