javascript - 检查 HTML5 联系表单中的空白字段

Question

我编写了一个使用 ajax 提交的 HTML5 联系表单。我想在其中一个字段为空时显示一条消息。在我的代码中，if 语句显示了消息，但它很快消失了。我如何触发该段落以使其保留，直到再次提交表单

谢谢各位前辈

$(document).ready(function(){
    $('#myForm').submit(function(e){
        var name = document.getElementById("name");
        var email = document.getElementById("email");
        var phone = document.getElementById("phone");
        var message = document.getElementById("textarea");


        if(name.value=="" || email.value=="" || phone.value=="" || message.value=="")
        {
            var warning = document.getElementById("warningMessage");
            warning.innerHTML = "Error: Please complete required fields in order to submit";
            warning.style.border = "1px solid #FF3030";
            warning.style.background = "#FF6E6E";
            document.getElementById("name").focus();
            document.getElementById("myForm").reset();       
        }  
        else
        {
           $.ajax({
                type:"POST",
                url:"sendEmail.php",
                data: $('#myForm').serialize(),
                success:function(){
                    alert('Form was submitted properly');
                    document.getElementById("myForm").reset();
                }
            });
            //return false;
        }
    });
});

HTML5 形式:

<form method="post" name="form"  id="myForm">
    <label >Request Service</label> </br>
    <label >Note:<span> * </span>indicates all require field</label> </br>
    <label>Name: <span>*</span></label></br>
    <input type="text" required="required" name="name" placeholder="Please enter your name" id="name"></br>
    <label>Email: <span>*</span></label></br>
    <input type="email" name="email" required="required" placeholder="Please enter your email" id="email"></br>
    <label>Phone:</label></br>
    <input type="text" name="phone" placeholder="Please enter your phone number" id="phone"></br>
    <label>Message:</label></br>
    <textarea name="comments" maxlength="500" cols="25" rows="6" placeholder="Enter message" id="textarea"></textarea></br>
    <input class="submit" type="submit" name="submmit">
</form>
<p id="warningMessage"></p>

Answer 1

消息很快消失，因为提交事件没有事先取消。

您可以通过以下方式捕获并防止页面跳转:

$('#myForm').submit(function(e){
     e.preventDefault();
     /// the rest of your code.

当事件被阻止时，浏览器将不会采取默认操作，在这种情况下，通过普通的旧 HTTP 请求提交实际表单，就像您通过 ajax 调用所做的那样。

看看这个code example看看它的实际效果。