Question

我做什么
在发送到服务器之前，我使用jquery来验证表单。
我验证了每一个输入，如果其中任何一个输入错误，我会调用event.preventDefault()并显示错误。（如果它返回true我什么都不做......）

问题
它工作正常，脚本始终在表单发送之前运行，但现在我使用ajax验证电子邮件 - 检查电子邮件是否已经存在于db中或域是否存在...但是ajax开始，表单不会等到它完成并在ajax完成之前发送并且输入验证。

某些解决方案可能
我可以调用event.preventDefault()并在验证完成后返回true我可以尝试通过preventDefault撤消unbind perhabs，然后通过jquery再次提交表单submit。

或者perhabs我可以做onsubmit="checkInputs();"它应该等到它返回true或false ......

解决方案 - 改编自用户Mirage

接受的答案

function validate(){
    $.ajax({
        url: 'http://google.nl',
        async: false,
        type: "POST",
        data: {test:'request'},
        success: function(data){
            console.log(data);
        }
    });    
    return data; // important
}

Answer 1

尝试添加

async: false

示例：

$.ajax({
    url: 'http://google.nl',
    async: false,
    type: "POST",
    data: {test:'request'},
    success: function(data){
        console.log(data);
    }
});

Answer 2

你想要：

onsubmit="checkInputs(); return false;"

然后你会抓住表格，例如：

var frm = document.getElementById("myfrm");
frm.submit();

您可以将上述内容放在验证逻辑的else条件中。希望这会有所帮助。

Answer 3

您的脚本流程应该是这样的：

绑定提交处理程序
使用ajax
检查结果
1. 验证时：删除处理程序并发布表单
2. false时：显示错误消息并重新开始。

在代码中：

var handleValidationResponse = function(data) {
    if(data.errors != 0) {
        alert('Sorry my dear user, but you made a mistake');
        return false;
    }
    // aight, so it's all fine
    $('#myForm').off('submit').trigger('submit'); // unbind custom submit handler and post the form
};

$('#myForm').on('submit', function(e) {
    e.preventDefault();

    var $this = $(this);
    var serializedFormData = $this.serializeArray();
    $.post($this.attr('action'), serializedFormData, function(data) {
        handleValidationResponse(data);
    });
});

那应该是它！

在提交之前验证表格

3 个答案: