JSFiddle - React, Tailwind, and code Playground

by Dimas Polyakov

HTML

<div id="modal_form">
        <div class="container">
           <span class="modal_closex"></span>
            <form class="sender" method="POST">
               <input type="hidden" name="DATA[TITLE]" value="Заказ демонстрации с сайта  3D Life Viz Quantificare">
                <label for="name">Имя</label><br>
                    <input type="text" name="DATA[NAME]" id="name" class="text" required><br>
                <label for="email">E-mail</label><br>
                    <input type="text" name="DATA[EMAIL_WORK]" id="email" class="text" required><br>    
                <label for="phone">Номер телефона</label><br>
                    <input type="text" name="DATA[PHONE_WORK]" id="phone" class="text right" required><br>
                    <input type="submit" class="right" value="заказать демонстрацию">
            </form>
        </div>        
    </div>

JavaScript

$(".sender").submit(function(e) {
    var ref = $(this).find("[required]");
    $(ref).each(function(){
        if ( $(this).val() == '' )
        {
            alert("Заполните поля формы заказа.");
            //$(this).after('<p class="invalid">Заполните это поле</p>');
            $(this).focus();
            e.preventDefault();
            return false; 
        } else {
            $.ajax({
                 type: "POST",
                 url: "rest.php",
                 data: $(".sender").serialize()
            }).done(function() {
              $('#modal_form').html('<div class="sent"><p>Мы отправим Вам демонстрацию <br>в течении 15 минут!</p></div>');
                });
            return false;
        }
    });  
});