验证通过AJAX加载的表单页面

-1

如何验证通过页面上的AJAX加载的表单。我正在使用jquery validate.js。插入。我通过ajax加载表单后调用验证函数，但它不起作用。验证通过AJAX加载的表单页面

jQuery代码：

$(document.body).on('click', '.submitBtn', function(){ 
    var id=$(this).attr('id'); 
    $("#form"+id).validate({ 
    submitHandler: function() { 

     // do anything 

    } 
    }); 
});

任何帮助将得到高度赞赏。

来源

2014-04-25 Shilpi Singh

你的意思是'jquery.validate.js'？ – Liam

检查控制台是否有错误。我认为当你运行'validate'方法时'$（“＃form”+ id）'还不可用。 –

如果我假设您有一个main页面和ajax页面中的ajax表单，看起来像是在主页面中静态地保存了表单验证的代码。甚至在阿贾克斯发生之前。

因此当加载main页面时，验证代码会运行，但它不会找到"#form"+id（因为它尚未加载）。因此插件的事件绑定失败。

你可以做的是发送验证脚本以及你的ajax响应，以便验证代码只在你载入表单并且事件被正确绑定后才运行。

OLD AJAX FILE

//contains only the form

新的Ajax FILE

//contains the form 
//then contains the validation code.

注 -还有其他的方法来做到这一点。就像使用jQuery的live方法一样。快速谷歌会给你不少结果。

来源

2014-04-25 08:31:45

如果仔细查看他的代码，您会发现他很好且真正使用委托（源自.submitBtn的事件由document.body委托）。所以它的绑定是可以的。看看我的回答， – wander

如果'id'是一个字符串，并且它构建了一个像“#formTHESTRING”这样的字符串，那么选择器就没有问题了。 –

“#formTHESTRING”表示一个id为“ormTHESTRING”的元素。显然这是一个错误的选择。 – wander

这是一个简单的语法错误，更改"#form"+id到"form#"+id 这里的jsfiddle。

$(document.body).on("click", "form", function() { 
    var id = $(this).attr('id'); 
    $("form#" + id).validate({ 
     submitHandler: function() { 
      alert("submit"); 
     } 
    }); 
});

我想知道为什么你用这种丑陋的方式选择元素。如果表单没有id属性，则选择将失败。我认为this更好

来源

2014-04-25 08:40:49 wander

这个代码在表单已经加载时正常工作。。但在页面上通过ajax加载表单时不起作用。 –

正如你所看到的，表单是动态添加的，而不是从启动时添加的......只需用ajax替换附加代码即可。 – wander

@ShilpiSingh - 正如我所说的那样试试jQuery'live'，或者将脚本放在'ajax'响应本身的表单之后。 –

验证通过AJAX加载的表单页面

回答

相关问题