JSFiddle - React, Tailwind, and code Playground

by mixailhr

HTML

<form id="conveademailform " class="form-inline" method="POST">
            <span class="fa fa-envelope-o hidden-xs"></span> <label class="text_ub fs13"> Узнавайте об акциях и скидках, получаете промо-коды и бонусы: </label>
                      <input id="inputMail" name="mailFF" maxlength="35" type="email" placeholder="Ваш e-mail" class="conveademail form-control input actioninput" required>
                      <span id="valid" class="text_ruso"></span>
              <button class="btn btn-danger btn-email" type="submit"><span>Получать</span></button>
              <!--<input type="checkbox" checked class="req" required>Я согласен на обработку <a target="blank" href="/img/privacy.pdf">персональных данных</a> -->
          </form>

JavaScript

//FORM//
document.getElementById('conveademailform').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "/send.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("mailFF=" + f.mailFF.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты свяжутся с Вами в ближайшее время.');    
      f.mailFF.removeAttribute('value'); // очистить поле сообщения (две строки)
      f.mailFF.value='';
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
}, false);

$(document).ready(function() {
			$('#mailFF').blur(function() {
				if($(this).val() != '') {
					var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
					if(pattern.test($(this).val())){
						$(this).css({'border' : '1px solid #569b44'});
						$('#valid').text('Верно');
					} else {
						$(this).css({'border' : '1px solid #ff0000'});
						$('#valid').text('Не верно');
					}
				} else {
					$(this).css({'border' : '1px solid #ff0000'});
					$('#valid').text('Поле email не должно быть пустым');
				}
			});
		});
//FORM//