Question

我正在通过ajax加载一个表单并使用新的.on（）来加载jQuery validate插件在我再次按下提交之前没有加载。我理解为什么我这么想。当我按下提交时，on（）函数在表单上加载验证。有没有什么办法解决这一问题？在我使用livequery之前，但是这不适用于jQuery 1.9.1，或者至少不推荐使用。这是我的代码：

 $(document)
.on("submit",function(event){
$("#myform").validate();
    event.preventDefault();
  })

此代码以前在jQuery 1.4.2中运行

 $("#myform")
.livequery(function(){
$(this).validate():
  })

所以现在发生的是表单未提交，但错误仅在我再次按提交时显示。

更新感谢Sparky的新见解！我习惯于在早期的jQuery版本中使用livequery。但我知道livequery一直在监听元素并将CPU负载放在客户端上。您在jsfiddle上的代码完全符合我的要求！

所以我不应该在生成的表单上使用.on（）？而是在回调中运行表单上的validate（）。这段代码有效（当然是在document.ready中）：

$("#ask").click(function(){
     //send postdata from inputs, returns form with filled fields (defined with jQuery selectors)
    $.post("include_form.lasso",{zip:zip,custno:custno},function(data){
    // div"skjema" is filled with form with ID  
$("#skjema").html(data);
})
    .done(function() { $("#myform").validate();});
})

我在validate（）中有很多额外内容，这里没有显示。我没有测试过这个，但我想它会起作用。在这里使用.ajax（）而不是我的.post（）代码是否更好？我做的是 - 点击链接时，将两个字段zip和custno发送到“include_form.lasso” - 将结果填入“skjema”DIV。这是一种形式 - 将validate（）函数附加到生成的表单 - 我不需要在表单上使用stopPropogation（）来阻止默认提交？它应该首先验证？

更新在Sparky的帮助下，这里有什么作用：只是想分享我的代码。我的动态表单需要2个函数，validate（）和autocomplete（）。所以我将validate（）代码和自动完成功能放在2个函数中：

function pumpemod(){ 
$("#pumpemod").autocomplete({
source: "code/sql2.php?mod=1",
minLength: 3,
delay: 400}); }

function send_validate() { $("#my_dropdown").validate()...}

所以在.on（）代码中我调用了函数。当我单击一个单选按钮时，它会获取一个表单。它看起来像这样：

$(document)
    .on('click','input.montRadio',function(event){
    var pnr = $("#postnr").val();
    var knr = $(this).attr("rel");
   $.post("code/vis_skjema.lasso",{postnr:pnr,kundenr:knr},function(data){
        $("#skjema").html("/images/loading.gif");
        $("#skjema").html(data);
        pumpemod();
        send_validate();
    });

    });

希望这可以帮助别人。至少我现在对on（）有了很好的理解。我想从livequery转到on（）。

Answer 1

当我按提交时，on()函数会在表单上加载验证。 ...所以现在发生的是表单未提交但仅提供错误当我再次按提交时显示。

你是对的。在您第一次点击submit之前，该插件未在您的表单上初始化。这是因为，使用on()，您只需将插件的初始化函数附加到submit事件。无论您如何执行此操作，delegate，bind等，您的问题都是相同的......在第一次点击之前，您永远不会正确初始化插件。

所以现在发生的是表单未提交

您的preventDefault()阻止正常提交。您需要摆脱所有这些，只需在构造表单的HTML后立即调用.validate()。

有什么方法可以解决这个问题吗？

您必须在使用ajax加载表单后立即初始化插件（一次）。执行此操作的代码在哪里？尝试将.validate()函数放在加载表单的complete的{{1}}回调函数中。这将在ajax完成后运行.validate()。

或者如果您使用jQuery .load() ...

ajax

如果没有看到您的$('#content').load('form_loader', function() { ('#myform').validate(); // initialize plugin after form is loaded });代码，下面的原始演示很快就会构建为仅模拟此概念。点击“测试”按钮加载包含ajax的表单，然后在完成后初始化ajax。

<强> http://jsfiddle.net/dUmfK/

您可以看到表单已加载到.validate()并准备好在第一次点击之前进行验证。

Answer 2

我觉得你有误导......

工作示例： http://jsfiddle.net/mFeww/4/

     $(document).ready(function(){
        $("#formID").on("submit",function(event){
            $("#myform").validate();
            event.preventDefault();
      })
});

HTML：

<form id="formID">

</form>

Answer 3

您需要在调用on时添加一个选择器来创建委托而不是常规绑定：

$(document).on("submit", "#myform" function(event){
  $(this).validate();
  event.preventDefault();
});

如果可能，将委托绑定到比整个文档更靠近表单的元素。

Answer 4

根据我的评论

 $(document).ready(function(){
  $("#myform").on("submit",function(){
   $(this).validate();
  return false;
 });
});

Answer 5

我有类似的东西。这是我如何解决它。

我有同样的问题：我的目标：使用相同的类验证许多表单：

我的php：

form class="js-validate-itemForm" method="post" action="">
...
form class="js-validate-itemForm" method="post" action="">

我的js：

$('.js-validate-itemForm').each(function () {
       $(this).validate({
           submitHandler: function (form, event) { 
               doActionOnItemform(form, event);
               return false;
           }
        });
    });

使用.on和.validate的jQuery必须提交表单两次才能验证

5 个答案: