Question

我正在使用JQuery Form Plugin，JQuery validation plugin和jqTransform插件。

我有一个隐藏的表单，我可以添加或编辑内容。编辑或添加操作会触发下一个函数调用。

function activateAddForm(formId,callback) {
    $('#'+formId).jqTransform().validate({
            submitHandler: function(form) {
                $(form).ajaxSubmit( {
                    dataType: "json", 
                    success: function(json) {
                        callback(json);
                    }
                });                 
            }
        }); 
}

每个呼叫都有不同的参数。对于添加，我用

调用它

activateAddForm('add-new-form',addToy);

进行编辑，我称之为

activateAddForm('add-new-form',editToy);

这就是：

重新加载页面。
编辑一个玩具。
提交表格。
调用editToy函数。
尝试添加内容。
使用addToy作为回调调用函数activateAddForm，但是一旦提交了表单，就会调用editToy函数。

如果重新加载后我做的第一件事就是添加玩具。然后总是调用addToy函数。

我尝试过添加：

function activateAddForm(formId,callback) {
    $('#'+formId).ajaxFormUnbind();
    ...
}

或

function activateAddForm(formId,callback) {
    $('#'+formId).resetForm();
    ...
}

但它没有用。知道我该怎么办？

变通方法试验

Activa建议添加该行：

$.removeData($('#'+formId)[0],'validator');

function activateAddForm(formId,callback) {
$('#'+formId).jqTransform();
$.removeData($('#'+formId)[0],'validator');
$('#'+formId).validate({
        submitHandler: function(form) {
            $(form).ajaxSubmit( {
                dataType: "json", 
                success: function(json) {
                    callback(json);
                }
            });                 
        }
    }); 
}

Casues the next：

重新加载页面。
- 编辑一个玩具。
- 提交表格。
- 调用editToy函数。
- 尝试添加内容。
- 调用表单editToy函数，然后调用add function。

上述修复不起作用，但似乎是在正确的方向。

还有什么想法？

Answer 1

我认为如果你只是更改验证器的submitHandler而不是将它放在validate函数的参数中就会简单得多。

$('#form').validate().settings.submitHandler = function () {
   // your function goes here.
}
$('#form').submit();

Answer 2

检查验证器插件的源代码后，似乎一旦调用validate（）函数，后续对validate（）的调用就没有效果了。

解决方法是在调用validate（）之前调用以下内容：

$.removeData($('#'+formId)[0],'validator');

编辑：

再次检查您的代码，我认为我们需要改变策略： - ）

function updateAddForm(formId,callback) {
$('#' + formId).data("successCallback",callback);
}

function initAddForm(formId) {
$('#'+formId).jqTransform()..validate({
        submitHandler: function(form) {
                $(form).ajaxSubmit( {
                        dataType: "json", 
                success: function(json) {
                        $('#'+formId).data("successCallback")(json);
                }
                        });                     
        }
    }); 
}

一开始，你打电话：

initAddForm('add-new-form');

要设置回叫，请致电：

updateAddForm('add-new-form', addToy);

或

updateAddForm('add-new-form', editToy);

这可能会成功。

Answer 3

$('#comment').validate({
      rules:{
               comments:{required:true}
         },
    messages:{
               comments:{required:'Please enter the comment' }
          },
           submitHandler: function(form) { //asynchronusly post the form data

                        var url=MAIN_SITE_URL+'rating/getrate/';
                        var comments=$('#comments').val(); 
                        url+='rating/comment/'+comments;
                        $.post(url,$('#rating').serialize(),
                                             function(response){alert(response); }

           }
     });

Answer 4

没有足够的信息来回答您的问题。如果你在firefox工作，尝试安装firebug插件并尝试检查表单元素。

从这里的描述我可以看到你可能正在使用两种不同的表单元素在同一页面上使用相同的ID。我要做的第一件事就是区分形式唯一ID元素如：编辑形式添加型

只是一个想法，我希望有人能为你找到更好的答案。

为什么JQuery表单submitHandler不刷新其回调？

变通方法试验

4 个答案: