使用.on和.validate的jQuery必须提交两次表单以进行验证

问题描述

我正在通过ajax加载表单并使用新的.on()来加载jQuery validate插件，而在第二次按下提交之前，该插件未加载.我明白为什么会这样.当我按下Submit时，on()函数将验证加载到表单上.有没有什么办法解决这一问题?在我使用livequery之前，但不建议将它与jQuery 1.9.1一起使用，或者至少不建议这样做.这是我的代码:

I am loading a form via ajax and usind the new .on() to load the jQuery validate plugin is not loaded before I press the submit a second time. I understand why I think. The on() function loads the validate on the form when I press submit. Is there any way to fix this? Before I was using livequery but that does not work with jQuery 1.9.1 or at least is not recommended. Here is my code:

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

此代码以前在jQuery 1.4.2中起作用

This code worked before in jQuery 1.4.2

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

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

So what happens now is the form is not submitted but the errors only show when I press submit a second time.

更新:感谢您提供新的见解Sparky！我习惯在早期的jQuery版本中进行livequery.但我知道livequery一直在侦听该元素，并将CPU负载置于客户端上.您在jsfiddle上的代码完全符合我的要求！

update:Thanks for new insight Sparky! I am used to livequery in earlier jQuery versions. But I understand that livequery is constantly listening for the element and puts CPU load on the client. Your code on jsfiddle does exactly what I want!

所以我不应该在生成的表单上使用.on()?而是在回调中的窗体上运行validate().这段代码有效(当然在document.ready内部):

So I should not use .on() on the generated form? Instead run the validate() on the form in the callback.This code works (inside document.ready of course):

$("#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()来阻止默认提交吗?应该先验证吗?

I have a lot of extras in the validate() that is not shown here. I haven't tested this but I guess it will work. Is it better to use .ajax() instead of my .post() code here? What I do is- when the link is clicked send the two field zip and custno to "include_form.lasso"- fill the result in the "skjema" DIV. This is a form- attach the validate() function to the generated form- I do not need a stopPropogation() on the form to prevent default submit? It should validate first?

更新:在Sparky的大力帮助下，这里的工作原理是:只是想分享我的代码.我需要2个用于动态表单的函数validate()和autocomplete().因此，我将validate()代码和自动完成功能放入了2个函数中:

Update:After great help from Sparky here is what works:Just wanted to share my code. I needed 2 functions for my dynamic form, validate() and autocomplete(). So I put the validate() code and the autocomplete in 2 functions:

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

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

因此，在.on()代码中，我调用了函数.当我单击单选按钮时，它将获取一个表单.看起来像这样:

So in the .on() code I call the functions. When I click a radio button it fetches a form. It looks like this:

$(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().

Hopes this can help someone else. At least I got a good understanding now of on(). I wanted to move from livequery to on().

推荐答案

您是正确的.除非您第一次单击submit，否则插件不会在您的表单上初始化.这是因为，使用on()，您只需将插件的初始化函数附加到submit事件.不管您如何执行delegate，bind等操作，问题都将相同……您将永远无法正确初始化插件，直到第一次单击该插件.

You are correct. The plugin is not initialized on your form until you click submit the first time. This is because, with on(), you are simply attaching the plugin's initialization function to a submit event. No matter how you do this, delegate, bind, etc., your problem will be the same... you'll never properly initialize the plugin until after that first click.

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

Your preventDefault() is blocking the normal submit. You need to get rid of all this and simply call .validate() immediately after you construct the form's HTML.

使用ajax加载表单后，必须立即初始化插件(一次).这样做的代码在哪里?尝试将.validate()函数放在加载表单的ajax的complete回调函数中. ajax完成后，它将运行.validate().

You must initialize the plugin (one time) immediately after you load the form with your ajax. Where is the code that does this? Try putting your .validate() function inside of the complete callback function of the ajax that loads your form. This will run .validate() once upon completion of the ajax.

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

Or if you use jQuery .load()...

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

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

Without seeing your ajax code, the crude demo below was quickly constructed to only simulate this concept. Click the "test" button to load a form with ajax, which then initializes .validate() upon completion.

http://jsfiddle.net/dUmfK/

http://jsfiddle.net/dUmfK/

您可以看到表单已加载到div中，并且可以在第一次单击之前进行验证.

You can see the form is loaded into a div and ready to validate before the very first click.

这篇关于使用.on和.validate的jQuery必须提交两次表单以进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！