在提交之前验证表单答案

【问题标题】：validating form before it submit在提交之前验证表单
【发布时间】：2014-07-30 10:20:50
【问题描述】：

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

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

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

或者也许我可以做onsubmit="checkInputs();"，它应该等到它返回真或假...

解决方案 - 改编自用户Mirage接受的答案

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

【问题讨论】：

ajax 是异步的，尝试通过添加 async: false 使其同步

标签： javascript jquery ajax

【解决方案1】：

尝试添加

async: false

示例：

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

【讨论】：

这对我有用，但只有当我在 ajax 之后有 return value; 时...，没有它它仍然会触发表单...
很高兴听到您解决了问题

【解决方案2】：

你想要的：

onsubmit="checkInputs(); return false;"

然后您将获取表单，例如：

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

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

【讨论】：

以上是非jquery逻辑
请注意，您将在此处进入验证循环，因为当您以编程方式提交表单时，它将再次落入 onsubmit 处理程序。
这就是我阅读提交前必须验证所有输入的问题的方式。返回 false 将验证，并且仅当最终条件为 true 时才会提交表单。
对不起，我很困惑：当使用 jquery (trigger('submit')) 时，它会再次落入 onsubmit 处理程序，而当您像上面一样提交表单时，它会完全忽略处理程序。所以这确实会发布表单，尽管处理程序中有return false;（除非你返回任何东西或者只是不以编程方式提交表单）
这让我想到，您要么需要将按钮保留为提交按钮，要么将其设置为具有 onsubmit 逻辑的按钮，包括返回 false。它是这些组合之一。将它放在 jquery 中的 else 条件或相应函数中的原因是，如果所有字段都有效，它只会到达那里并提交表单。

【解决方案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);
    });
});

应该是这样的！

【讨论】：