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

Posted 2023-05-08

【中文标题】使用 .on 和 .validate 的 jQuery 必须提交两次表单才能验证

【英文标题】：jQuery using .on and .validate must submit form twice to validate

【发布时间】：2013-03-18 07:02:19

【问题描述】：

我正在通过 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()。

【问题讨论】：

第一个sn-p，是整个代码吗？如果是这样，您需要准备好文档，然后在表单元素上使用具有 .on() 方法的选择器

正是...只需修改前几行就可以了

通过ajax加载表单的代码在哪里？

【参考方案1】：

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

你是对的。在您第一次单击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()。

http://jsfiddle.net/dUmfK/

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

【讨论】：

我在原始答案中评论了您的回复。如果我知道我不需要 .on() 函数？

@asle，您理解正确。但是，请记住我的回答只关注表单上插件的正确初始化。

不确定你的意思。加载特定表单时初始化 validate() 是一种好习惯吗？我通常在动态元素上使用 .on()，但 .on() 需要一个事件，而这不是我想要触发该功能的原因。

@asle，我只是想弄清楚我的答案...这只是在您使用ajax 加载表单后处理插件初始化...而不是关于如何处理任何@ 987654344@ 用于提交表单数据。这对读者来说可能并不完全清楚。是的，因为.validate() 只是一个“一次性”插件初始化，它必须发生在表单创建之后，也之前你需要有可用的验证。对于大多数人来说，这是基于 DOM ready 事件。对您来说，它是在您创建/加载表单的 HTML 之后立即完成的。

感谢您的澄清。我非常感谢您的时间和洞察力:-)

【参考方案2】：

我觉得你拼错了..

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

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

HTML：

<form id="formID">

</form>

【讨论】：

这有什么不同？如您所见，your jsFiddle has the exact same problem as the OP is describing... no validation until after the submit button is clicked twice. 那是因为在第一次单击提交按钮之前，插件没有在表单上初始化。 （这是一个非常流行的误解。）您必须 初始化插件（仅一次）在按钮被第一次点击之前。

【参考方案3】：

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

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

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

【讨论】：

问题仍然是您必须在运行 validate() 之前“提交”。 Sparky 是正确的。

@asle：啊哈，validate 方法不验证，它只添加验证。是的，那么您需要在表单存在时立即调用它。

【参考方案4】：

根据我的评论

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

【参考方案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;
           
        );
    );