JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<form>
    <div>
        <label>Ваше имя:</label>
        <input type="text" id="firstname" onchange="notFocus(this)" />
        <div class="error">Вы ввели некорректное количество символов: меньше 3 или больше 35</div>
    </div>
    <div>
        <label>Ваша фамилия:</label>
        <input type="text" id="surname" onchange="notFocus(this)" />
        <div class="error">Вы ввели некорректное количество символов: меньше 3 или больше 35</div>
    </div>
</form>

CSS

.error {
    font-weight: bold;
    color: red;
    display: none;
}

JavaScript

function notFocus(field) {
    var errorBlock = nextByClass(field, 'error');
    if (field.value.length < 3 || field.value.length > 10) {
        errorBlock.style.display = 'block';
    } else {
        errorBlock.style.display = 'none';
    }
}

function hasClass(elem, cls) {
    var str = " " + elem.className + " ";
    var testCls = " " + cls + " ";
    return(str.indexOf(testCls) != -1) ;
}

function nextByClass(node, cls) {
    while (node = node.nextSibling) {
        if (hasClass(node, cls)) {
            return node;
        }
    }
    return null;
}