防止双提交jquery验证ajax

时间:2015-01-14 18:09:47

标签: jquery ajax jquery-validate

我正在使用jquery.validate.js来验证我的表单,我正在使用的查询正在运行,一切都在工作,有一件事我无法找到解决方法

<div id="form">
   <form>
       <div class="form-group">
      Input, radio, textarea
       </div>
       <div class="form-group">
          <button class="btn btn-black" id="next">Continue</button>
       </div>
   </form>
</div>

当用户点击“继续”时,表单会被验证并被“提交”,那就是我不需要提交表单,以防止我执行以下操作:

$().ready(function() {
    var validator = $("#packs").bind("invalid-form.validate", function() {
        $("#summary").html("Erros");
    }).validate({
        debug: false,
        errorElement: "em",
        errorContainer: $("#warning, #summary"),
        errorPlacement: function(error, element) {
            error.appendTo(element.parent("div"));
        },
        success: function(label) {
            label.text("ok!").addClass("success flosts");
        },
        submitHandler: function (form) {
            $("#enviaforms").fadeOut("slow");
            $("#rebvs").fadeIn("slow");
            $("#revisa").click(function(){
                $("#rebvs").fadeOut("slow");
                $.ajax({
                    type: $(form).attr('method'),
                    url: $(form).attr('action'),
                    data: $(form).serialize(),
                    dataType : 'json',
                    cache: false,
                    success: function(){
                        $("#respuesta").fadeIn("slow");
                    },
                    error: function(){
                        console.log();
                        alert("Error please try again...");
                    }
                }).done(function (data) {
                    if (data.sts == true) {
                        $(".loading").fadeOut( "slow" );
                        $("#enviaforms").fadeOut("slow");
                        $("#respuesta").html(data.datas.valids);
                        // $(form).reset();
                        // alert(data.datas.valids);
                    } else {
                        $(".loading").fadeOut( "slow" );
                        alert('fail');
                    }
                });
                return false;
            });
            $("#editar").click(function(){
                $("#enviaforms").fadeIn("slow");
                $("#rebvs").fadeOut("slow");
                return false;
            })
        },
        rules: { ... },
        messages: {...}
     });
   });

如果您注意到我的submitHandler函数,我还有其他ID的作用,隐藏表单并在表单外显示另一个div,其中包含所有用户的个人数据和其他设置供用户查看,其他div我有两个按钮,一个是实际提交表单但记住按钮在表单之外 提交表单和编辑表单,这两个按钮在表单之外,我用.click()函数调用它...如果用户点击编辑表单,它会隐藏评论div并显示表单,当用户点击时提交表单它实际上通过ajax提交表单。
恢复: 用户提交表单的点击次数..

  

[填写表格]继续 - &gt; [评论表格全部确定]提交表格=完美执行,我们都很高兴......

     

[表格]继续 - &gt; [返回编辑表格]编辑表格 - &gt; [编辑后]继续 - &gt; [全部确定]提交表格=不行,发送双提交...... :(

所以,问题是,如果用户返回编辑然后返回评论然后提交表单,我该如何阻止双重提交 ...

我认为问题是“继续”按钮,因为它被按两次但是,如何在没有它的情况下验证表单?...如果我使用A标签进入下一阶段,表单不会如果表单有错误并且当用户点击提交按钮时确定它会输出一些错误但用户不会看到它们,因为错误在表单内部并且那时表单被隐藏所以没有错误显示,我需要先显示任何错误...

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

您可以使用验证工具的.valid()方法,以检查您的表单是否有效而不提交。

validator.valid();// it will check if all your fields are valid without submitting anything.

从那里开始,工作流程可以随时随地发送表单。