JSFiddle - React, Tailwind, and code Playground

by Sergei

HTML

<div class="block_950">
<div class="fz-block">
<div class="fz1-hide">
<p class="fz-text1">ПОЛУЧИТЕ БЕСПЛАТНЫЙ АНАЛИТИЧЕСКИЙ ОТЧЁТ</p>
<p class="fz-text2">О ПРОВОДИМЫХ ЗАКУПКАХ В ВАШЕЙ НИШЕ</p>
<form id="fz1" action="mail.php">
<input type="text" id="name-fz1" name="name" placeholder="ВВЕДИТЕ ВАШЕ ИМЯ" class="fz-field" style="margin-left: 18px;">
<input type="text" id="tel-fz1" name="tel" placeholder="ТЕЛЕФОН" class="fz-field">
<input type="text" id="mail-fz1" name="mail" placeholder="E-MAIL" class="fz-field">
<input type="hidden" name="refers" class="refer" value="">
<input type="hidden" name="parameter" value="Заявка на аналитический отчет">   
<div id="submit-fz1" class="fz-button">ПОЛУЧИТЬ ОТЧЕТ</div>
</form>
<div class="clear"></div>
<p class="fz-text3">ГАРАНТИРУЕМ КОНФИДЕНЦИАЛЬНОСТЬ ВАШИХ ПЕРСОНАЛЬНЫХ ДАННЫХ</p>
</div class="fz1-hide">
<div class="fz-thanks">
<span class="fz-thanks-header">ВАША ЗАЯВКА ОТПРАВЛЕНА</span><br /><br />В ближайшее время ждите звонка нашего специалиста.
</div class="fz-thanks">
</div>
</div>
</div>

JavaScript

<script>
$(function() {
$('#submit-fz1').click(function() {
        if(document.getElementById("fz1").name.value == "") {
            $(function(){
            document.getElementById("name-fz1").style.backgroundColor="#FF0000";
            setTimeout(function() {document.getElementById("name-fz1").style.backgroundColor="#FFFFFF";},500);})
            return;
        } else if(document.getElementById("fz1").tel.value == "") {
            $(function(){
            document.getElementById("tel-fz1").style.backgroundColor="#FF0000";
            setTimeout(function() {document.getElementById("tel-fz1").style.backgroundColor="#FFFFFF";},500);})
            return;
        } else if(document.getElementById("fz1").mail.value == "") {
            $(function(){
            document.getElementById("mail-fz1").style.backgroundColor="#FF0000";
            setTimeout(function() {document.getElementById("mail-fz1").style.backgroundColor="#FFFFFF";},500);})
            return;
        } else {
            $(function(form){ $('#fz1').ajaxSubmit();})
            $(function(){ yaCounter27433121.reachGoal('ANALIT');})
            $(function(){ ga('send', 'event', 'Order', 'Submit', 'Analit');})
            $('.fz1-hide').fadeOut(500); 
            $('.fz-thanks').delay(600).fadeIn(500); 
        }
})
})
</script>