3

我的表格有双重提交。

步骤 1. 使用 ajax 在我定义的 url 上提交

步骤 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 上提交表单，然后它将允许表单执行其默认行为，例如 Ist 步骤以在我的 url 上使用 ajax 保存信息，然后在第二步如果表单具有提交表单的操作，则执行此操作，或者如果表单具有 ajax 提交，则在提交时执行此操作或其他其他表单行为

更新 ：

有2人

  1. 我是
  2. 我的客户

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

所以现在我给他们我的脚本并要求用我的方式把它放在你的表单上，一旦他们把它放好，我也会在提交后得到表单的详细信息。

但我没有提供任何验证脚本..

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

我的问题：

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

4

7 回答 7

2

在 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
}
于 2017-04-20T11:26:25.133 回答
0

你可以试试

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();
});
于 2017-04-18T10:40:54.217 回答
0

您可以尝试同时返回 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;
    }
});
于 2017-04-25T12:22:38.040 回答
0

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

于 2017-04-27T11:13:33.310 回答
0

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

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

类型：Function() 表单有效时处理实际提交的回调。获取表单作为唯一参数。替换默认提交。验证后通过 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');
            }
        });
    }
});
于 2017-04-20T11:27:52.117 回答
0

据我了解，您希望将带有 AJAX 的表单提交到 url，在那里进行验证，如果成功返回，请第二次将其提交到其默认操作。

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

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

顺便说一句，你后面缺少一个逗号data: formInputData

于 2017-04-26T16:19:52.757 回答
0

尝试这个

对于验证，您可以在此处使用 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();
        }
    });
});
于 2017-04-25T12:18:47.940 回答