JSFiddle - React, Tailwind, and code Playground

by Lena R

HTML

<form method="post" action="">
 <input type="text" name="tell" class="inputTel" value="Телефон">
 <div class = "infoerror">Ваши данные не соответствуют формату</div>
 <br/><br/>
 <input type="submit" name="button" class="button" value="Отправить">
 <input type="reset" name="button" class="reset" value="Очистить">
</form>

CSS

.inputTel {
border: 2px solid gray;
height:25px;width:400px;}
.button {
width:100px; height:30px; border:1px solid; background:gray;}
.infoerror{
top:10px;left:50px;
width:200px;
height:40px;position:relative;
background-color:red;
display:none;

JavaScript

var validateInput = function(input) {

var input.value = {};
var regexp = /^\+380\d{2}/;
if (regexp.test(input.value) !== true) { 
	document.querySelector('.infoerror').style.display = "block";
        input.addEventListener('focus', validateInput, false);
    } else {
        document.querySelector('.infoerror').style.display = "none";
    }

};