JSFiddle - React, Tailwind, and code Playground

HTML

<form name="registr">
    <ul>
        <li>Имя<span>*</span> <input type="text" name="name" maxlength="10"></li>
        <li>Фамилия<span>*</span> <input type="text" name="family" maxlength="15"></li>
        <li>Город<span>*</span> <input type="text" name="city" size="20" maxlength="20"></li>
    </ul>
    <ul>
        <li>E-mail<span>*</span> <input type="text" name="email"></li>
        <li>Пароль<span>*</span> <input type="password" name="pass" maxlength="15"></li>
        <li>Повторите пароль<span>*</span> <input type="password" name="pass_repeat" maxlength="15"></li>
    </ul>
    <input type="button" name="form" value="Регистрация" class="butt registration">
    <input type="reset" name="form" value="Стереть" class="butt">
</form>

CSS

form {
        border: 1px solid silver;
        border-radius: 5px;
        padding: 10px;
        width: 400px;
        height: 250px;
        margin: 50px auto;
        font: 16px Calibri;
    }

    ul {
        margin: 15px 0;
        padding: 0;
    }

    li {
        list-style: none;
        padding: 5px;
    }

    input {
        float: right;
        margin-right: 20px;
    }

    span {
        color: red;
        font: 12px Tahoma;
        font-weight: bold;
    }

    .butt {
        float: left;
        margin-right: 10px;
        padding: 1px;
    }

JavaScript

$(function(){
    $('.registration').on('click', function(e){
        e.preventDefault();
        
        var form = $(this).closest('form');
        var name = form.find('[name="name"]');
        var email = form.find('[name="email"]');
        var pass = form.find('[name="pass"]');
        
        if ( !name.val().match(/^[а-я]+$/i) )
            append_error(name);
        else
            remove_error(name);
        
        if ( !email.val().match(/^.+@.+\..+$/i) )
            append_error(email);
        else
            remove_error(email);
        
        if ( !pass.val().match(/^[0-9a-z]+$/i) )
            append_error(pass);
        else
            remove_error(pass);
    });
    
    function  append_error(elem)
    {
        console.log('a');
        elem.parent().find('.trfl').remove();
        elem.after( '<span class="trfl">&#10006;</span>' );
    }
    
    function  remove_error(elem)
    {
        console.log('r');
        elem.parent().find('.trfl').remove();
        elem.after( '<span class="trfl">&#10004;</span>' );
    }
});