javascript - 如何防止页面在表单提交时重新加载，并显示一条小文字 "successfully registered"

Question

我试图阻止页面重新加载，并且我想在提交表单时在表单中的某处显示一条小消息，显示“已成功注册”。我可以通过返回 false 来做到这一点，但用户的输入不会发布到我的数据库中。

提前谢谢

这是我的代码:

        <script>

    function validate(form) {
        fail  = validateName(form.name.value)
        fail += validateEmail(form.email.value)
        fail += validateCity(form.city.value)
        if (fail == "") { 
   alert("You have been successfully registered."); return true }
        else { 
   document.getElementById('errors').innerHTML = fail;}
   return false
}

        function validateName(field) {
            if (field == "") return "No name was entered.<br/>"
            else if (field.length < 3) return "Name must be at least 3 characters.<br/>"
            else if (!/[a-zA-Z ]/.test(field)) return "Name can only have alphabetical characters.<br/>"
            return ""
            }
        function validateEmail(field) {
            if (field == "") return "No email was entered.<br/>"
            else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The email address is invalid.<br/>"
            return ""
            }
        function validateCity(field) {
            if (field == "") return "No city was entered.<br/>"
            else if (field.length < 3) return "City must be at least 3 characters.<br/>"
            else if (!/[a-zA-Z ]*$/.test(field)) return "City can only have alphabetical characters.<br/>"
            return ""
            }

    </script>


<form action="<?php echo $editFormAction; ?>" name="subscribe" onSubmit="return validate(this)" id="subscribe" method="POST" autocomplete="off">
<div id="errors"></div>
<input name="name" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" id="name" placeholder="Your name"/>


<input name="email" required id="email" type="email" title="Please enter your email address" placeholder="Your email address"/>

<input name="city" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" id="city" placeholder="Your city"/>

<div id="buttons">
            <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">

            <input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!">

            <br style="clear:both;">
        </div>
<input type="hidden" name="MM_insert" value="subscribe">
  </form>

!( https://docs.google.com/file/d/0B69C1JAAohvcYmIyOFdZRGlPRFk/edit?usp=sharing )

Answer 1

正如前面的发帖者所指出的，您应该编写一个 Ajax 函数来异步提交表单。表单处理程序将返回一条消息，该消息可以附加到页面上的 div 中。这是一个例子:

$(function() {

    $('#submitbtn').click(function(event) {
        event.preventDefault();
        var form = $(this).closest('form'),
            action = form.attr('action');
        $.post(action, form.serialize(), function(data) {
            $('#form-message').html(data);
        })
    });

}); 

根据OP的回复进行更新:
我发布的代码是如何使用 Ajax 的示例，而不是完整的解决方案。为了使其成为完整的解决方案，您可以将原始代码与我发布的代码结合起来，以便仅在表单通过验证例程时才会触发表单提交。验证例程将在 event.preventDefault() 之后进行，这会阻止表单立即提交。

我会为您的错误消息创建一个数组。每次缺少必填字段时，您都可以向数组添加错误。在验证例程结束时，您可以检查数组的大小。如果它为空，则意味着没有错误，您将提交该表单。如果其中包含一个或多个错误，您将不会提交该表格。相反，您可以将错误打印到屏幕上。

我的代码示例建议后端表单处理程序返回包含状态消息的数据以显示给用户。例如“感谢您注册!”或“糟糕，出了点问题!请重试。”状态消息将附加到 ID 为“form-message”的 div 中。您必须向后端表单处理程序添加 return 语句，并向标记添加类似的 div 元素才能创建该功能。