How to prevent empty ajax form fields from being submitted?

Question

AJAX

The code:

$(function () {
    $('.reference-link').magnificPopup();
    $('.groups').change(function () {
    let gid = $(this).val();
    let form = $(this).closest('form');
    $.ajax({
        url: 'data.php',
        method: 'post',
        data: {gid: gid}
    }).done(function (obiturient) {
        console.log(obiturient);
        obiturient = JSON.parse(obiturient);
        form.find('[name="obiturients"]').empty();
        obiturient.forEach(function (obiturient) {
            form.find('[name="obiturients"]').append('<option value='+ obiturient.id +'>' + obiturient.O_fam + ' ' +  obiturient.O_name + ' ' + obiturient.O_otch + '</option>')

        })
    })
})

})

$(function() {
    $('#popup1btn, #popup2btn, #popup3btn, #popup4btn').click(function() {
        data = 'id=' + $('#obiturients').val();
        data += '&sprtype=' + $('#popup1btn, #popup2btn, #popup3btn, #popup4btn').val();
        data += '&isp=' + $('#performer,#performer2,#performer3,#performer4').val();
        data += '&phone=' + $('#phone,#phone2,#phone3,#phone4').val();
        $.ajax({
            url: 'curl.php',
            type: 'post',
            data: data,
            success: function(d){
                alert(d);
            }

        });
    });

HTML (there are 4 forms, but let's take one as an example):

<div id="popup1" class="mfp-hide popup">
        <h2 class="popup-title">Справка о периоде обучения</h2>
        <form class="reference-form" id="form1" action="javascript:void(0);" method="post" autocomplete="off">
            <div class="reference-select">
                <select class="groups" name="groups" id="groups" required>
                    <option value="default" disabled selected>Выберите группу</option>
                    <?php
                    $groups = loadGroups();
                    foreach($groups as $group){
                    ?>
                    <option id="<?=$group['id']?>" value="<?=$group['id']?>"><?=$group['name']?></option>
                    <?php } ?>
                </select>
            </div>

            <div class="reference-select">
                <select class="obiturients" name="obiturients" id="obiturients" required>
                    <option value="default" disabled selected>ФИО</option>
                </select>
            </div>
            <div class="reference-input1">
                <input id="performer" type="text" name="performer" class="textinputref" placeholder="Исполнитель" required>
                </div>
                <div class="reference-input2">
                <input id="phone" type="tel" class="textinputref" placeholder="Номер телефона" required>
            </div>
            <button id="popup1btn" class="reference-btn" value="spr24" >Создать</button>
        </form>

I do not understand how to prohibit sending empty fields if the data is not filled. Hope you can help, thanks in advance :)

Answer 1

Just add validation for these fields. If at least one of the fields is not filled, the check will fail and the request will not fly away