使用.on和.validate的jQuery必须提交表单两次才能validation
我正在通过ajax加载一个表单并且使用新的.on（）来加载jQuery validate插件在我再次按下提交之前没有加载。 我理解为什么我这么想。 当我按下提交时，on（）函数在表单上加载validation。 有没有什么办法解决这一问题？ 在我使用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（）来阻止默认提交？ 它应该先validation？
更新：在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（）。
当我按下提交时，
on()函数在表单上加载validation。 …所以现在发生的是表单未提交但错误仅在我第二次按提交时显示。
你是对的。 在您第一次单击submit之前，插件不会在您的表单上初始化。 这是因为，使用on() ，您只需将插件的初始化函数附加到submit事件。 无论你如何做， delegate ， bind等，你的问题都是一样的…你永远不会正确初始化插件，直到第一次点击之后。
那么现在发生的是表单未提交
您的preventDefault()阻止了正常提交。 您需要摆脱所有这些，并在构造表单的HTML后立即调用.validate() 。
有没有什么办法解决这一问题？
在使用ajax加载表单后，必须立即初始化插件（一次）。 执行此操作的代码在哪里？ 尝试将.validate()函数放在加载表单的ajax的complete回调函数中。 这将在完成ajax后运行.validate() 。
或者如果你使用jQuery .load() ……
$('#content').load('form_loader', function() { ('#myform').validate(); // initialize plugin after form is loaded });
在没有看到你的ajax代码的情况下，下面的原始演示很快被构建为仅模拟这个概念。 单击“测试”按钮以加载带有ajax的表单，然后在完成时初始化.validate() 。
您可以看到表单已加载到div并在第一次单击之前准备好进行validation。
我觉得你有误导……
工作示例： http ： //jsfiddle.net/mFeww/4/
$(document).ready(function(){ $("#formID").on("submit",function(event){ $("#myform").validate(); event.preventDefault(); }) });
HTML：
您需要在on的调用中添加一个选择器来创建委托而不是常规绑定：
$(document).on("submit", "#myform" function(event){ $(this).validate(); event.preventDefault(); });
如果可能，将委托绑定到比整个文档更靠近表单的元素。
根据我的评论
$(document).ready(function(){ $("#myform").on("submit",function(){ $(this).validate(); return false; }); });
我有类似的东西。 这是我如何解决它。
我遇到了同样的问题：我的目标：使用同一个类validation许多表单：
我的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; } }); });