使用jQuery验证表单输入后，如何提交表单数据？

你当前的代码已经通过AJAX完成了表单输入的前置验证，但验证通过后不知道如何提交表单数据，这里提供两种常用的解决方法：

方法一：触发原生表单提交（页面跳转） #

你已经通过event.preventDefault()阻止了表单的默认提交行为，验证通过后可以直接调用表单DOM元素的原生submit()方法——这个方法不会再次触发你绑定的jQuery提交事件，能直接让表单按照预设的action和method提交到process.php：

修改代码中的else块即可：

} else {    
    // 验证通过，触发原生表单提交
    this.submit();
}

完整修改后的代码：

<form action="process.php" method="POST">
    Enter your email: 
    <input type="email" name="email" id="email" required>
    <input type="submit" value="Subscribe!">
</form>

<script>
$(document).ready(function () {
    $("form").submit(function(event) {
        
        var formData = {
            email: $("#email").val()
            // ...
        };
        
        $.ajax({
            type: "POST",
            url: "/validation/form",
            data: formData,
            dataType: "json",
            encode: true,
        })
        .done(function(data) {
        
            console.log(data);
            
            if (!data.success) {
                
                if (data.errors.email) {
                    $('#email').after('<div class="error"><p>' + data.errors.email + '</p></div>');
                }
                
                // ...
            
            } else {    
                // 验证通过，触发原生表单提交
                this.submit();
            }
        })
        .fail(function (data) {

            $("form").before(
                '<div class="flash_message"><p>Could not reach server, please try again later.</p></div>'
            );
        });
        
        
        event.preventDefault();
    });
}); 
</script>

方法二：AJAX直接提交（无刷新） #

如果不想页面跳转，可在验证通过后直接用AJAX把数据提交到process.php，实现无刷新提交，提升用户体验：

修改else块如下：

} else {    
    // 验证通过，无刷新提交到process.php
    $.ajax({
        type: "POST",
        url: "process.php",
        data: formData,
        encode: true,
        success: function(res) {
            // 提交成功后的逻辑示例
            $("form").before('<div class="success"><p>订阅成功！</p></div>');
            $("#email").val(''); // 清空输入框
        },
        error: function() {
            $("form").before('<div class="error"><p>提交失败，请稍后重试</p></div>');
        }
    });
}

这种方式适合需要用户留在当前页面的场景，无需刷新即可完成提交流程。

内容的提问来源于stack exchange，提问作者Mary