JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <form action="" class="myForm" method="post">
        <input type="text" name="login" placeholder="login">
        <input type="email" name="email" placeholder="email">
        <input type="number" name="phone" placeholder="phone">

        <input type="submit" value="submit">

        <p class="result"></p>
    </form>
</div>

CSS

input[type="text"],
input[type="email"],
input[type="number"] {
    margin-right: 10px;
    height: 30px;
    text-indent: 15px;
    line-height: 30px;
    border: none;
}

input[type="text"].succes,
input[type="email"].succes,
input[type="number"].succes {
    background: lightgreen;
}

input[type="text"].error,
input[type="email"].error,
input[type="number"].error {
    background: lightpink;
}

input[type="submit"] {
    padding: 8px 30px;
}

.result {
    font-size: 20px;
}

.result.succes {
    color: green;
}

.result.error {
    color: red;
}

JavaScript

let inputCollection = document.querySelectorAll('input[type="email"], input[type="text"], input[type="number"]');
let myForm = document.querySelector('.myForm');
let result = document.querySelector('.result');

function isEmpty(el){
    return el.value.length === 0;
}

let waiting = false;
let checked = false;
function checkForm(){
	checked = false;
  waiting = true;
  let res = [];
  let resultText = '';
  for (let i = 0; i < inputCollection.length; i++) {
    if (!isEmpty(inputCollection[i])) {
      res.push(inputCollection[i]);
    } else {
      inputCollection[i].classList.remove('succes');
      inputCollection[i].classList.add('error');
      resultText += 'Missing datat for input ' + inputCollection[i].getAttribute('type') + '<br>';
    }
  }
  result.classList.remove('succes');
  result.classList.add('error');
  result.innerHTML = resultText;
  if(res.length === inputCollection.length){
    result.classList.remove('error');
    result.classList.add('succes');
    result.innerHTML = 'Data was sent';
    setTimeout(function(){
      checked = true;
      waiting = false;
      alert('Sended!')
      myForm.submit();
    }, 2000);
  } else return false;
}

myForm.onsubmit = function(event){
    if (!checked && !waiting){
    	event.preventDefault();
      checkForm();
    } else if (checked && !waiting){
    	result.innerHTML = 'Data was sent - <b>Complete!</b>';
    } else return false;
};

for (let i = 0; i < inputCollection.length; i++) {
    inputCollection[i].oninput = function(){
        this.classList.remove('error');
        this.classList.add('succes');
    };
}