在必填字段不为空的情况下，如何使用javascript在表单中创建条件以在单击“提交”按钮时显示消息？

Question

I have a form which have required input fields. I need to show a thank you message after someone clicks the submit button but not when the required fields are empty. Can anyone can help me how can i do this using javascript? Thanks in advance. My code is as below:

HTML:

<form action="contact.php" method="post">
<div class="row">
    <div class="col-md-6 control-group">
        <div class="alt-placeholder">Name</div>
        <input id="contactName" type="text" name="name" value="" size="40" placeholder="Name" data-validation-required-message="Please fill the required field." required>
        <div class="help-block"></div>
    </div>
    <div class="col-md-6 control-group">
        <div class="alt-placeholder">Email</div>
        <input id="contactEmail" type="email" name="email" value="" size="40" placeholder="Email" data-validation-required-message="Please fill the required field." required>
        <div class="help-block"></div>
    </div>
    <div class="col-md-12 control-group">
        <div class="alt-placeholder">Message</div>
        <textarea id="contactMessage" name="message" placeholder="Message" data-validation-required-message="Please fill the required field." required></textarea>
        <div class="help-block"></div>
    </div>
    <div class="col-md-12 form-actions">
        <input class="button highlight-white sendButton" type="submit" value="Send">
    </div>
    <div class="contactAlert"></div>
</div>
</form>

Javascript:

var sendButton = document.querySelector(".sendButton");
var contactAlert = document.querySelector(".contactAlert");


var contactName = document.querySelector("#contactName").value;
var contactEmail = document.querySelector("#contactEmail").value;
var contactMessage = document.querySelector("#contactMessage").value;

function showAlert(e) {
    e.preventDefault();
    contactAlert.innerHTML = "Thank you!! Your information has been recorded in our database. We will contact you shortly.";
}
function hideAlert(){
    contactAlert.innerHTML = "";
}

if(contactName == null || contactEmail == null || contactMessage == null){
    sendButton.onclick = hideAlert;
}
else{
    sendButton.onclick = showAlert;
}

Answer 1

change

if(contactName == null && contactEmail == null && contactMessage == null

to

if(contactName == null || contactEmail == null || contactMessage == null

Answer 2

change

if(contactName == null && contactEmail == null && contactMessage == null)

to

if(contactName != null && contactEmail != null && contactMessage != null)

Seems you are posting your form through to raw PHP. You may need an onsubmit attribute in there. And move all your javascript logic to a javascript function (formSubmit) like below:

<form action="contact.php" method="post" onSubmit="formSubmit()">

For example: https://www.w3schools.com/js/js_validation.asp