Question

我有一个奇怪的Ajax问题（我不是很擅长，所以所有的问题都很奇怪..）我有一个需要大量验证的表单（涉及大文件）所以我决定在用户等待时实现一个小的Ajax方法来验证。问题是，虽然正确地进行了Ajax调用，但是在完成验证后，我无法让表单发布到正确的php文件。

表单看起来像这样;

<form id="initialForm" method="post" action="/files/processing.php">
...    
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit"/> 
</form>

，javascript看起来像这样：

$(function() {
    var request;
    $("#initialForm").submit(function(e) {
        e.preventDefault();
        var validated = false;
        //flush pending requests
        if (request){request.abort;}
        $.ajax({
            url: 'test.php',
            method: 'POST',
            data: $('#initialForm').serialize()
        }).success(function (response){
            var errorMessages = JSON.parse(response);
            console.log(errorMessages['errorTest']);
            validated = checkErrorMessages(); //true/false
        }).done(function (response) {
             $('#initialForm').unbind('submit');
            if (validated)
               $('saveForm').click();
        }).fail(function () {
        });
    });
});

将errorMessages JSON对象中包含的消息记录到控制台后，表单不会提交到“files / processing.php”。我确信它是一件小事，但我无法让它发挥作用。

谢谢你们！

Answer 1

您最初阻止了表单的提交。因此，您必须在记录错误后提交它。

$(function() {
    var request;
    $("#initialForm").submit(function(e) {
        e.preventDefault();
        var validated = false;
        //flush pending requests
        if (request){request.abort;}
        $.ajax({
            url: 'test.php',
            method: 'POST',
            data: $('#initialForm').serialize()
        }).done(function (response) {  
            var errorMessages = JSON.parse(response);
            console.log(errorMessages['errorTest']);
            if(checkErrorMessages()) { //validate fields
                $('#initialForm').unbind('submit'); //unbind submit if valid
                $('#saveForm').click(); //submit form
            }
        }).fail(function () {
        });    
    });
});

编辑：只有在表单验证成功时才必须取消绑定提交事件，否则无法取消绑定。您可以使用.success（）或.done（）函数（两者都执行相同的工作）。但最好使用done（），因为success {）将从version 1.8弃用。我已相应更新了上述代码。

Ajax表单提交行为

1 个答案: