JSFiddle - React, Tailwind, and code Playground
HTML
<form method="post" id="form_top" name="form_top" action="/mail.php">
<input type="text" class="textbox" name="fio" id="fio" placeholder="NAME"><div id="fio_err"></div><br><br>
<input type="text" class="textbox" name="tel" id="_phone_top" placeholder="PHONE"><div id="tel_err"></div><br><br>
<input type="text" class="textbox" name="email" id="email" placeholder="E-Mail"><div id="email_err"></div><br><br>
<input type="text" class="textbox" name="company" placeholder="COMP"><br><br>
<input type="text" name="formfrom" value="верхняя форма" hidden>
<input type="submit" class="textbox" name="ok" id="ok" value="Submit!" disabled><br>
</form>
JavaScript
function checkForm() {
var err = 0;
if (document.getElementById("fio").value == '') {
document.getElementById("fio").style.border = "1px solid #FF0000";
document.getElementById("fio_err").innerHTML = "Enter data";
err = 1;
}
if (document.getElementById("_phone_top").value.length < 5) {
document.getElementById("_phone_top").style.border = "1px solid #FF0000";
document.getElementById("tel_err").innerHTML = "length < 5";
err = 1;
}
var email = document.getElementById('email').value;
emailTest = "^[_.0-9a-z-]+@([0-9a-z][0-9a-z_-]+.)+[a-z]{2,4}$";
var regex = new RegExp(emailTest);
if (!regex.test(email)) {
document.getElementById("email").style.border = "1px solid #FF0000";
document.getElementById("email_err").innerHTML = "invalid e-mail";
err = 1;
}
if ( err == 1 ) {
document.getElementById('ok').setAttribute("disabled","disabled");
} else {
document.getElementById('ok').removeAttribute("disabled");
}
// if (err == 1) document.getElementById("ok").disabled = true;
// if (err == 0) document.getElementById("ok").enable = false;
}
function setBorder(id) {
document.getElementById(id).style.border = "1px solid #C0C0C0";
document.getElementById(id+"_err").innerHTML = "";
}
document.getElementById('ok').addEventListener("mouseover", checkForm);