Question

我写了一个HTML5联系表单，使用ajax提交。我想在其中一个字段为空时显示一条消息。在我的代码中，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

消息很快就会消失，因为submit事件未事先取消。

您可以通过执行以下操作来捕获此页并阻止页面跳转：

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

当事件被阻止时，浏览器将不会采取默认操作，在这种情况下，通过普通的旧HTTP请求提交实际表单，因为您正在使用ajax调用进行操作。< / p>

请查看此code example以查看其实际效果。

Answer 2

它消失了太快＆＃34;因为您正在执行代码以显示和重置元素，而语句之间没有任何延迟。您还可能需要在click事件上使用e.preventDefault（）。你已经在使用jQuery了，所以你有一些更简单的方法：

首先，只需将适当的css应用于div本身，使用display：none。没有必要多次设置，或使用javascript。

    style="display: none; border: 1px solid #FF3030; background: #FF6E6E"

然后，更换您的点击事件：

$('#myForm').submit(function(e){

    e.preventDefault(); // prevent form from submitting by default action

    if ($("#name").val() == "" || $("#email").val() == "" || $("#phone").val() == "" || $("#textarea").val() == "") {

    $("#warningMessage").html("Error: Please complete required fields in order to submit");
    $("#warningMessage").slideDown().delay(3000).slideUp();
    // If you don't like the slide transitions, use fades by replacing the line above with the following line:
    // $("#warningMessage").fadeIn().delay(3000).fadeOut();

    ... // rest of js code

此代码将显示元素，等待3秒，然后再次隐藏它。

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

2 个答案: