如何在需要字段不为空的情况下使用javascript在单击提交按钮上显示消息时使用表单创建条件？

Question

我有一个需要输入字段的表单。我需要在有人点击提交按钮后显示感谢信息，但是当必填字段为空时则不显示。任何人都可以帮我，我怎么能用javascript做到这一点？提前致谢。我的代码如下：

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

更改

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

至

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

Answer 2

更改

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

至

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

似乎您将表单发布到原始PHP。您可能需要一个onsubmit属性。并将所有的javascript逻辑移动到javascript函数（formSubmit），如下所示：

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

例如：https://www.w3schools.com/js/js_validation.asp