JSFiddle - React, Tailwind, and code Playground

HTML

<form name="test" method="post" action="input1.php">
  <p><b>Ваше email:</b><br>
   <input type="text" size="40" id="email">
   <div id="error-email"></div>
   
 <p><b>Ваше имя:</b><br>
   <input type="text" size="40" id="name">
   <div id="error-name"></div>
   <p><button type="submit" form="data" id="submit">Отправить форму</button></p>
 </form>

CSS

.invalid{
 border: 2px solid red;
}

JavaScript

let submit = document.getElementById("submit");

let re = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;

let mail = document.getElementById("email");
let errormail = document.getElementById("error-email");

mail.onblur = function() {   

let myMail = document.getElementById("email").value;
let valid = re.test(myMail);


if (!valid) {
mail.classList.add('invalid');
errormail.innerHTML = 'Your Name is Required.'
submit.style.cursor="not-allowed";
return false;
}
};

mail.onfocus = function() {
if (this.classList.contains('invalid')) {

this.classList.remove('invalid');
errormail.innerHTML = "";
submit.style.cursor=null;
}
};

//==========Проверка Имени===========================

let name = document.getElementById("name");
let errorname = document.getElementById("error-name");
name.onblur = function() {
  if ( name.value.trim() === '') { // если не заполнено
    name.classList.add('invalid');
    errorname.innerHTML = 'Пожалуйста, введите Ваше Имя.'
  }
};

name.onfocus = function() {
  if (this.classList.contains('invalid')) {
    // удаляем индикатор ошибки, т.к. пользователь хочет ввести данные заново
    this.classList.remove('invalid');
    errorname.innerHTML = "";
  }
};
//=======================================================
// function but(){
 
// if(mail.length==0){
///    submit.style.cursor="not-allowed";  
//}

//}