<form id="form" novalidate="" name="contact_us" action="<?php echo esc_url( admin_url('admin-ajax.php') ); ?>">
    <input type="hidden" name="action" value="customer_data">
     <div class="inputs">
        <div class="single_input_block">
           <input id="first_name" name="first_name" type="text" placeholder="Имя" required=""> 
           <span>Мы хотим знать как вас зовут:)</span>
        </div>
        <div class="single_input_block">
           <input id="phone" name="phone" type="phone" placeholder="Телефон" required="">
           <span>Без номера мы вам не дозвонимся</span>
        </div>
        <div class="single_input_block">
           <input id="email" name="email" type="email" placeholder="Почта" required=""> 
           <span>Отправим лучшее предложение</span>
        </div>
     </div>
     <button id="submit" form="contact_us" type="submit"> Отправить</button>

  </form>
var formValue = {};
var btn = document.querySelector('#submit');
var email = document.querySelector('#email');
var my_form = document.querySelector('#form');
btn.addEventListener('click', validateForm);

function validateForm() {
  var arr = [...form.getElementsByTagName('input')];

  arr.forEach(function (element) {
    if ((element.id != 'submit') && (element.id !='')) {
      formValue[element.id] = element.value;

      if (!element.value) {
        var errrorInput = document.getElementById(element.id);
        errrorInput.classList.add('error');
        var visibility = 'visible';
        showMessage(errrorInput, visibility);
      } else if (element.value && element.id != 'email') {
        var correctInput = document.getElementById(element.id);
        correctInput.classList.remove('error');
        var _visibility = 'hidden';
        showMessage(correctInput, _visibility);
      } else if (element.value && element.id === 'email') {
        validateEmail(email);
      } else return;
    }
  });
}

function validateEmail(email) {
  var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

  if (reg.test(email.value) === false) {
    var errrorInput = my_form.getElementById(email.id);
    errrorInput.classList.add('error');
  } else {
    var correctInput = my_form.getElementById(email.id);
    correctInput.classList.remove('error');
    var visibility = 'hidden';
    showMessage(correctInput, visibility);
  }
}

function showMessage(input, visibility) {
  input.nextElementSibling.style = "visibility: ".concat(visibility, ";");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.