Question

我的表格有双重提交。

步骤1.使用ajax

在我定义的网址上提交

步骤2.允许表单作为其默认行为。

问题：

我没有对我的脚本进行任何验证。我没有使用像jquery validate这样的插件。

提交表单时，jquery验证工作正常（如果表单已经存在），但在ajax完成之后，允许提交表单。

如果有验证，那就不会发生。

我将此脚本提供给我的客户，以便在我的平台上获取提交的表单信息。

这就是为什么我不知道哪个验证客户端将使用或者他们将不会使用，或者他们将使用任何插件进行验证。

如果有验证错误，我只想停止提交。

我知道

存在问题

$("form[data-track=MySubmit]").off("submit");
$("form[data-track=MySubmit]").trigger( "submit" );
return true;

脚本部分：

$("form[data-track=MySubmit]").on("submit", function(event) {   
    var formInputData = $(this).serialize();
    $.ajax({
        url: "/insertdata",
        type: "post",
        data: formInputData
        dataType: 'json',
        success: function(responce) {

            $("form[data-track=MySubmit]").off("submit");
            $("form[data-track=MySubmit]").trigger( "submit" );
            return true;
        }
    });
});

更多信息：

它是一个双重提交脚本..首先它将在一个不提供表单操作的URL上提交表单然后它将允许表单执行其默认行为，如我步骤在我的网址上使用ajax保存信息然后在第二步，如果表格有提交表格的行动，那么这样做或如果表格有ajax提交然后在提交时做这个或其他形式的行为

更新：

有2个人

我
我的客户

我向我的客户提供表单提交脚本，他们有自己的表单并拥有jquery / javascript。

所以现在我正在给他们我的剧本，并要求用我的方式把它放在你的表格上，一旦他们提出，我也会在提交后得到表格的细节。

但我没有提供任何证据确认..

他们有自己的验证可能有任何插件或自定义jquery / javascript。

我的问题：

如果表单中有自己的jQuery / Javascript验证，我该如何停止表单提交？

Answer 1

内部Ajax Success函数再次检查表单有效

if($("form[data-track=MySubmit]").valid()){
    // the form is valid, do something
    $("form[data-track=MySubmit]").off("submit");
    $("form[data-track=MySubmit]").trigger( "submit" );
} else{
    // the form is invalid
}

Answer 2

你可以尝试

event.preventDefault();

喜欢这个

$("form[data-track=MySubmit]").on("submit", function(event) {   
var formInputData = $(this).serialize();
$.ajax({
    url: "/insertdata",
    type: "post",
    crossDomain: true,
    data: formInputData
    dataType: 'json',
    success: function(responce) {

        $("form[data-track=MySubmit]").off("submit");
        $("form[data-track=MySubmit]").trigger( "submit" );

    }
});
event.preventDefault();
});

Answer 3

您可以使用jquery validate()方法。我们可以传递submitHandler函数，该函数处理在发现表单没有客户端验证后如何处理表单提交。

submitHandler （默认：原生表单提交）

类型：功能（）   当表单有效时，回调处理实际提交。获取表单作为唯一参数。替换默认提交。在验证后通过Ajax提交表单的正确位置。

示例：有效时通过Ajax提交表单。

$("#myform").validate({
    submitHandler: function(form) {
        $(form).ajaxSubmit();
    }
});

你可以试试这个：

$("form[data-track=MySubmit]").validate({
    submitHandler: function(form) {
        var formInputData = $(form).serialize();

        //the default form submit behaviour
        $(form).submit();

        //form submit via ajax on custom url
        $.ajax({
            url: "/insertdata",
            type: "post",
            data: formInputData
            dataType: 'json',
            success: function(response) {
                console.log('form is submitted');
            }
        });
    }
});

Answer 4

试试这个

要进行验证，您可以在此处使用JQuery验证引擎插件：https://github.com/posabsolute/jQuery-Validation-Engine

$("form[data-track=MySubmit]").submit(function(event) {  
    event.preventDefault();          /////////added    
    var formInputData = $(this).serialize();
    $.ajax({
        url: "/insertdata",
        type: "post",
        data: formInputData, //////missing comma
        dataType: 'json',
        success: function(responce) {
              $("form[data-track=MySubmit]").submit();
        }
    });
});

Answer 5

您可以同时尝试返回false和event.preventDefault +当表单返回true时，您可以更改代码的行为。

dataCheck = false;
$("form[data-track=MySubmit]").on("submit", function(event) {
    if(dataCheck === false)
    {
        event.preventDefault();
        var formInputData = $(this).serialize();
        $.ajax({
            url: "/insertdata",
            type: "post",
            data: formInputData,
            dataType: 'json',
            success: function(responce) {
                dataCheck = true;
                $("form[data-track=MySubmit]").off("submit");
                $("form[data-track=MySubmit]").trigger( "submit" );
                return true;
            }
        });
        return false;
    }
});

Answer 6

根据我的理解，您希望将带有AJAX的表单提交给url，验证在哪里发生，如果成功返回，请将其第二次提交给默认操作。

如果是这种情况，那么您的代码几乎可以正常工作，但您需要做两件事：

将event.preventDefault();放在提交处理程序中，以防止表单的默认操作，因为我们希望我们只在AJAX成功返回后触发它。
如果AJAX成功返回并且您发现第二次未提交表单，请确保您的表单没有名为“submit”的提交按钮，因为这会隐藏默认提交操作和$("form[data-track=MySubmit]").trigger( "submit" );不行！将提交按钮重命名为“submitBtn”或其他任何内容。

顺便说一句，你在data: formInputData

Answer 7

有一个带有“默认”提交的隐藏按钮。完成使用jQuery处理ajax后，调用按钮上的click事件。

双重提交表单创建问题与验证

7 个答案: