JSFiddle - React, Tailwind, and code Playground
HTML
<form method="post" action="void">
<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) {
if (input.value.test != /\ ^+380\d{2}/) {
document.querySelector('.infoerror').style.display = "block";
input.value.addEventListener('input', validateInput, false)
} else {
document.querySelector('.infoerror').style.display = "block";
}
}
var validateButton = function(submit) {
if (input.value.test != /\ ^+380\d{2}/) {
document.querySelector('.button').style.input[type = "submit"]: disabled;
input[type = "submit"].addEventListener('click', validateButton, false)
} else {
document.querySelector('.button').style.input[type = "submit"]: enabled;
}
}