HTML/JavaScript: как использовать оповещение при отправке формы (с селектором запросов)?

Я написал некоторую HTML-форму, в которой форма должна предупреждать, когда ничего не отправлено. Я начал с создания этого для имен. Как и ожидалось, сообщение «Вы должны указать свое полное имя!» отображается, когда имя не введено. Однако сообщение также появляется, когда имена действительно введены…

{% расширяет "layout.html" %}

{% основной блок %}

<!-- http://getbootstrap.com/docs/4.1/content/typography/ -->
<h1 class = "mb-3">Form</h1>

<!-- http://getbootstrap.com/docs/4.1/components/forms/ -->
<form action = "/form" method = "post" id = "form_id">

    <div class = "form-row names">
        <div class = "form-group col-md-3 name1">
            <label for = "inputFirstname">First name</label>
            <input type = "name" autofocus class = "form-control" id = "inputFirstname" placeholder = "First name">
        </div>
        <div class = "form-group col-md-3 name2">
            <label for = "inputLastname">Last name</label>
            <input type = "name" class = "form-control" id = "inputLastname" placeholder = "Last name">
        </div>
    </div>
    <div class = "form-row clubs">
        <div class = "form-group col-md-3">
            <label cfor = "inlineFormCustomSelect">Club preference</label>
            <select class = "custom-select" id = "inlineFormCustomSelect">
                <option disabled selected value> -- select an option -- </option>
                <option value = "1">PSV</option>
                <option value = "2">Ajax</option>
                <option value = "3">Feyenoord</option>
                <option value = "4">De Graafschap</option>
                <option value = "5">RKVV Bergeijk 2</option>
            </select>
            <div class = "invalid-feedback">Please choose one option</div>
        </div>
    </div>
    <div class = "form-group">
        <label for = "PFoot">Preferred foot</label>
        <label class = "form-check-label">
            <input type = "radio" id = "PFoot" name = "algorithm" value = "right">
            Right
        </label>
        <label class = "form-check-label">
            <input type = "radio" id = "PFoot" name = "algorithm" value = "left">
            Left
        </label>
        <label class = "form-check-label">
            <input type = "radio" id = "PFoot" name = "algorithm" value = "zweipotig">
            Zweipotig
        </label>
    </div>

    <!-- http://getbootstrap.com/docs/4.1/components/buttons/ -->
    <button class = "btn btn-primary" type = "submit">Submit</button>

</form>

<script>
    document.querySelector('form').onsubmit = function() {
        if (!document.querySelector('.name1').value) {
            alert('You must provide your full name!');
            return false;
        }

        return true;
    }

</script>

{% конечный блок%}

Как и ожидалось, сообщение «Вы должны указать свое полное имя!» отображается, когда имя не введено. Однако сообщение также появляется, когда имена действительно введены…