jQuery addClass example

Change class name on click in jQuery

by dont_panic

HTML

<form id='goa-form'>
    <input name='foo' required>
</form>
<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>

<button 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>

JavaScript

const goaForm = document.getElementById('goa-form');
let success = document.getElementById('success-msg');
let error = document.getElementById('error-msg');

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

function checkForm() {
    let formCompleted = $.trim($('#goa-form input[required]').val()) !== '';
    let formIncomplete = $.trim($('#goa-form input[required]').val()) === '';
    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);