Ajax отправляет форму с пустыми обязательными полями

Question

При нажатии на ссылку ajax отправляет форму, но с пустыми полями (на полях стоит required)

let a = document.querySelector('.asd');
a.addEventListener('click', function(e){
    e.preventDefault();
    var form_data = $(form).serialize(); // Собираем все данные из формы
    $.ajax({
        type: "POST", // Метод отправки
        url: "php/post.php", // Путь до php файла отправителя
        data: form_data,
        success: function () {
            // Код в этом блоке выполняется при успешной отправке сообщения
            alert("Ваше сообщение отправлено!");
        }
    });
})
$("#form").submit(function (e) { // Устанавливаем событие отправки для формы с id=form
   
 });

<form id = "form" name="form" class="form" action="php/post.php" method="POST">
                        <input type="text" name="surname" placeholder="Фамилия И.О" required> <br>
                        <input type="text" name="office" placeholder="Отдел (полное название)"required > <br>
                        <select name="printer_model" required>
                            <option value="Kyocera">Kyocera</option>
                            <option value="HP">HP</option>
                            <option value="Cannon">Cannon</option>
                            <option value="Xerox">Xerox</option>
                            <option value="Samsung">Samsung</option>
                        </select><br>
                        <select name="service" id="service" required>
                            <option value="Заправка">Заправка</option>
                            <option value="Ремонт">Ремонт</option>
                            <option value="Очистка">Очистка</option>
                        </select><br>
                        <input type="text" name="number" placeholder="Инвентарный номер"  required> <br>
                         <span><a class="asd" ></a></span>
                    </form>

Answer 1

Добавил дизейбл для ссылки, если инпуты пусты.

function checkParams() {
    let surname = document.querySelector('#surname');
    let office = document.querySelector('#office');
    let number = document.querySelector('#number');
    let aBt = document.querySelector('#sa');
    if (surname.value != '' && office.value != '' && number.value != '') {
        aBt.classList.remove('disabled');
    } else {
        aBt.classList.add('disabled');
    }
}

БЛОГ НА HUSL

Ajax отправляет форму с пустыми обязательными полями

Ответы (1 шт):