Javascript 双重提交表单创建问题并进行验证

我的表格有双重提交

第一步。使用ajax在我定义的url上提交

第二步。允许窗体作为其默认行为

问题：

$("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;
        }
    });
});

---

我不提供任何验证我的脚本。我没有使用任何像jqueryvalidate这样的插件

提交表单时，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;
        }
    });
});

更多信息：

$("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上提交表单，该url不在表单操作中，然后它将允许表单执行默认行为，如 在我的url上使用ajax保存信息的第一步 然后在第二步中，如果表单有提交表单的操作，那么执行此操作，或者如果表单有ajax提交，那么在提交时执行此操作或其他表单行为

更新：

$("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;
        }
    });
});

有两个人

我是

我的客户

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

所以，现在我给他们我的脚本，并要求把它与我的方式在您的表格，一旦他们会把，我也会得到提交后的形式的细节

但我没有提供任何用于验证的脚本

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

我的问题：

如果表单本身的jQuery/Javascript进行了验证，如何停止表单提交？

您可以尝试

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();
});

---

在Ajax成功函数中再次检查表单是否有效

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
}

---

您可以为此使用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');
            }
        });
    }
});

试试这个

对于验证，您可以在此处使用JQuery验证引擎插件：

---

您可以尝试同时返回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;
    }
});

---

据我所知，您希望使用AJAX将表单提交到url，在url中进行验证，如果它成功返回，则第二次提交到其默认操作

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

Put

event.preventDefault（），以在开始时防止表单的默认操作，因为我们希望只有在AJAX成功返回后才触发它

如果AJAX成功返回，并且您看到表单没有第二次提交，请确保表单没有名为“提交”的提交按钮，因为这将隐藏默认的提交操作和

$（“表单[data track=MySubmit]”）。触发器（“提交”）不起作用！将提交按钮重命名为“submitBtn”或其他名称

---

顺便说一句，您在

数据之后缺少一个逗号：formInputData

有一个带有“default”submit的隐藏按钮。使用jQuery处理ajax之后，调用按钮上的click事件

建议：

更多信息

应该解释您的双重提交逻辑。但是大量使用“提交”这个词会让读者感到困惑，如果有什么需要更改，你可以编辑它。。。还有一个AJAX调用，将表单内容调用到“/insertdata”，在表单内容提交到“foo”之前，需要完成该调用（通过某种服务器端验证），对吗？你使用html5验证吗？如果可能的话，给我看看你的html表单。我没有使用像jquery这样的插件validate@PuzzledBoy但是如何检查验证呢？不能使用上面提到的关于jquery验证的任何插件。这不是通过jquery验证插件实现的吗…？我在那里提到过“这就是为什么我不知道哪个验证客户端会使用，或者他们不会使用，或者他们会使用任何插件进行验证。”所以你的意思是说你有一个自定义的验证方法来处理所有的验证规则。。。？？如果我错了，请纠正我…我想我遗漏了一些要点。。。您的意思是说，您既没有使用任何外部插件，也没有使用任何自定义的自制验证方法。。。？？那么你打算如何应用你的验证规则…？你说的“不工作”是什么意思？表单只发送一次到AJAX url，如果AJAX成功返回，通常会第二次提交表单。