1

我正在通过 ajax 加载表单并使用新的 .on() 来加载 jQuery 验证插件在我第二次按下提交之前没有加载。我明白我为什么这么想。当我按下提交时，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 一直在监听元素并将 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()。

4

5 回答 5

2

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

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

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

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

有没有什么办法解决这一问题？

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

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

$('#content').load('form_loader', function() {
    ('#myform').validate(); // initialize plugin after form is loaded
});

在没有看到您的ajax代码的情况下，快速构建了下面的粗略演示以仅模拟此概念。单击“测试”按钮以加载带有 的表单ajax，然后.validate()在完成时进行初始化。

http://jsfiddle.net/dUmfK/

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

于 2013-03-28T03:18:10.740 回答
0

我觉得你写错了。。

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

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

HTML：

<form id="formID">

</form>
于 2013-03-27T23:53:44.767 回答
0

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

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

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

于 2013-03-27T23:55:03.957 回答
0

根据我的评论

 $(document).ready(function(){
  $("#myform").on("submit",function(){
   $(this).validate();
  return false;
 });
});
于 2013-03-27T23:56:05.197 回答
0

我有类似的东西。这是我解决它的方法。

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

我的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;
           }
        });
    });
于 2016-02-28T18:10:17.457 回答