JSFiddle - React, Tailwind, and code Playground

HTML

<div class='input'>
  <input id='fio' type='text' placeholder='ФИО'/>
  <span class='error'>Только кирилица</span>
</div>

<div class='input'>
  <input id='email' type='text' placeholder='e-mail'/>
  <span class='error'>Ошибка</span>
</div>

<div class='input'>
  <input id='phone' type='text' placeholder='+7 (***) ***-**-**'/>
  <span class='error'>Ошибка</span>
</div>

<button id='check'>Проверить</button>

CSS

.input {
    margin-bottom: 10px;
}

.input .error {
    display: none;
    color: #F00;
    font-size: 11px;
}

.error .error {
    display: block;
}

JavaScript

r_fio = /[АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя ]+/;

r_email = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;

r_phone = /^\+7\s\(\d{3}\)\s\d{3}-\d{2}-\d{2}$/;

var fio = function() {
    var $this = $(this),
        val = $this.val();

    if (r_fio.test(val)) {
      $this.parent().removeClass('error');    
    } else {
      $this.parent().addClass('error');
    }
};

var email = function() {
    var $this = $(this),
        val = $this.val();

    if (r_email.test(val)) {
      $this.parent().removeClass('error');    
    } else {
      $this.parent().addClass('error');
    }
};

var phone = function() {
    var $this = $(this),
        val = $this.val();

    if (r_phone.test(val)) {
      $this.parent().removeClass('error');    
    } else {
      $this.parent().addClass('error');
    }
};

var check = function() {
    fio.apply($("#fio")[0]);
    email.apply($("#email")[0]);
    phone.apply($("#phone")[0]);
};

$('#check').bind('click', check);