JQUERY: Why don't any of my alerts appear when either one of my conditions matches true?

Question

My alert divs don't show up when I click the submit button.

An 'Error' div should alert when there's an empty required field and, a 'Success' div should alert right before the form submits. The form submits so I know the validation check works but, I don't see any of my alert divs. See code below:

const goaForm = document.getElementById('goa-form');
let formCompleted = $.trim($('#goa-form input[required]').val()) == !'';
let formIncomplete = $.trim($('#goa-form input[required]').val()) == '';
let success = document.getElementById('success-msg');
let error = document.getElementById('error-msg');

let submitButton = document.getElementById("btnSubmit");

function checkForm() {
    if (formCompleted) {
        success.style.visibility = 'visible';
        goaForm.submit();
    } else if (formIncomplete) {
        error.style.visibility = 'visible';
        $("#error-msg").fadeOut(28000);
        return false;
    }
}
submitButton.addEventListener("click", checkForm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="error-msg" style="visibility: hidden;" class="alert alert-danger" role="alert">
<span class="fs-14">Error message div</span></div>

<div id="success-msg" style="visibility: hidden;" class="alert alert-success" role="alert">
<span class="fs-15">Success!</span></div>

// Submit Button
<button onclick="checkForm()" id="btnSubmit" class="btn btn-success lift d-flex align-items- 
 center" type="submit">Submit my application <i class="fe fe-arrow-right ml-5"></i>
</button>

Thanks for the help guys.

Answer 1

checkForm() is fired when your button is clicked, but it uses values (formCompleted, formIncomplete) defined earlier, on page load. So you may fill out your form, but those variables are not updated, and clicking the button uses the old values that were set when the page was first loaded.

Instead, check the input states and define those variables inside your checkForm() function, so that they are set up as the actual, current results when the button is clicked. Then the tests evaluate what the form looks like at the time of the button click.

function checkForm() {
    let formCompleted = $.trim($('#goa-form input[required]').val()) == !'';
    let formIncomplete = $.trim($('#goa-form input[required]').val()) == '';
    // ... rest of your code ...

Update

Here's a working JSFiddle.

Notes:

• You're using a mix of plain JS and jQuery. There's nothing technically wrong with that, but it would certainly be easier to read and maintain if you stuck to one. If you are going to take the hit in loading jQuery (extra http request, 90kb odd extra resource, etc) you may as well use it.

• I am not sure if it is actually invalid, but the formCompleted test seems wrong. I'd use the standard !== '' instead of == !'' (I've done that in the JSFiddle);

• If you're going to use the type comparison for formCompleted, you should be consistent and also use it for formIncomplete, ie use === '' (I've done that in the JSFiddle);

• Don't use both an inline onClick() on the button, and add an addEventListener in your JS. They both do the same thing, use only one of them. It is considered bad practice to mix JS in with your HTML, so using the plain JS addEventListener (or jQuery .on()) is better. I've removed the inline one from the JSFiddle.